Added navigation links to menu

Vizzuality · Dec 2, 2024 · f229c46 · f229c46
1 parent e2bd6b4
commit f229c46
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/client/src/containers/header/index.tsx b/client/src/containers/header/index.tsx
@@ -12,17 +12,20 @@ import {
 } from "@/components/ui/popover";
 
 import Menu from "./menu";
+import Link from "next/link";
 
 const Header: FC = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <header className="flex items-center justify-between rounded-2xl bg-accent p-4">
-      <div className="h-[72px] w-[160px] space-y-3 bg-logo bg-no-repeat">
-        <h1 className="overflow-hidden whitespace-nowrap indent-[100%]">
-          4Growth Visualisation Platform
-        </h1>
-      </div>
+      <Link href="/sandbox">
+        <div className="h-[72px] w-[160px] space-y-3 bg-logo bg-no-repeat">
+          <h1 className="overflow-hidden whitespace-nowrap indent-[100%]">
+            4Growth Visualisation Platform
+          </h1>
+        </div>
+      </Link>
 
       {isOpen && <Overlay />}
 

diff --git a/client/src/containers/header/menu/index.tsx b/client/src/containers/header/menu/index.tsx
@@ -3,12 +3,16 @@ import { FC } from "react";
 import Link from "next/link";
 
 import UserMenu from "./user";
+import { usePathname } from "next/navigation";
 
 export const classes = {
   link: "block px-4 py-2 hover:bg-muted transition-colors",
 };
 
 const Menu: FC = () => {
+  const pathname = usePathname();
+  const showLinks = !/^\/(?:explore|sandbox)/.test(pathname);
+
   return (
     <nav className="min-w-[150px]">
       <ul className="overflow-hidden py-2">
@@ -23,6 +27,20 @@ const Menu: FC = () => {
             4Growth project site
           </a>
         </li>
+        {showLinks && (
+          <>
+            <li>
+              <Link href="/" className={classes.link}>
+                Explore
+              </Link>
+            </li>
+            <li>
+              <Link href="/sandbox" className={classes.link}>
+                Sandbox
+              </Link>
+            </li>
+          </>
+        )}
         <li>
           <Link href="/about" className={classes.link}>
             About