Merge pull request #10 from inkonchain/feat/header-top-nav

feat: new header top nav

apps/web/messages/en-US.json

@@ -53,6 +53,7 @@
     "routescan": "Routescan",
     "community": "Community",
     "contact": "Contact",
+    "ecosystem": "Ecosystem",
     "github": "GitHub"
   },
   "Community": {

apps/web/src/app/[locale]/(home)/RedirectNewNav.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+
+import { useRouterQuery } from "@/hooks/useRouterQuery";
+import { routing, useRouter } from "@/routing";
+
+export const RedirectNewNav = () => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const query = useRouterQuery();
+
+  useEffect(() => {
+    if (searchParams.get("newNav")) {
+      router.replace({
+        pathname: routing.pathnames["/new"],
+        query: {
+          ...Object.fromEntries(new URLSearchParams(query) || {}),
+          newNav: "true",
+        },
+      });
+    }
+  }, [query, searchParams, router]);
+
+  return null;
+};

apps/web/src/app/[locale]/(home)/page.tsx

@@ -14,6 +14,7 @@ import { EventContent } from "../_components/EventContent/EventContent";
 import { FloatingButtons, MainContent } from "../_components/MainContent";
 
 import { HomeShortcuts } from "./HomeShortcuts";
+import { RedirectNewNav } from "./RedirectNewNav";
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://inkonchain.com"),
@@ -55,6 +56,7 @@ export default async function HomePage() {
           ],
         }}
       />
+      <RedirectNewNav />
       <PageView />
       <HomeShortcuts />
       <div className="flex flex-col gap-12 lg:gap-28 mt-0 mb-12 lg:mb-24 pt-16 sm:pt-0">

apps/web/src/app/[locale]/new/_components/InkLogo.tsx

@@ -9,6 +9,7 @@ export const InkLogo: React.FC = () => {
   const query = useRouterQuery();
   return (
     <Link
+      className="rounded-full ink:bg-background-light size-12 flex items-center justify-center"
       href={{
         pathname: routing.pathnames["/new"],
         query,

apps/web/src/app/[locale]/new/_components/TopNav.tsx

@@ -1,12 +1,15 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
 
+import { PillContainer } from "@/components/PillContainer";
 import { useRouterQuery } from "@/hooks/useRouterQuery";
 import { Link, routing, usePathname } from "@/routing";
 import { classNames } from "@/util/classes";
 
 export const TopNav = () => {
+  const t = useTranslations("Menu");
   const pathname = usePathname();
   const query = useRouterQuery();
   // To support an optimistic click
@@ -16,20 +19,35 @@ export const TopNav = () => {
   }, [pathname]);
 
   return (
-    <nav className="flex items-center gap-8">
-      <Link
-        href={{
-          pathname: routing.pathnames["/new/dashboard"],
-          query,
-        }}
-        className={classNames("text-sm hover:opacity-70", {
-          "ink:text-text-primary font-semibold": selected === "/new/dashboard",
-        })}
-        prefetch
-        onClick={() => setSelected("/new/dashboard")}
-      >
-        Dashboard (Placeholder)
-      </Link>
-    </nav>
+    <PillContainer variant="ink-kit">
+      <nav className="flex items-center *:px-3 *:h-10 *:flex *:items-center *:transition-opacity hover:*:opacity-50">
+        <Link
+          href={{
+            pathname: routing.pathnames["/new"],
+            query,
+          }}
+          className={classNames("ink:text-body-3-regular", {
+            "ink:text-body-3-bold": selected === "/new",
+          })}
+          prefetch
+          onClick={() => setSelected("/new")}
+        >
+          {t("about")}
+        </Link>
+        <Link
+          href={{
+            pathname: routing.pathnames["/new/dashboard"],
+            query,
+          }}
+          className={classNames("ink:text-body-3-regular", {
+            "ink:text-body-3-bold": selected === "/new/dashboard",
+          })}
+          prefetch
+          onClick={() => setSelected("/new/dashboard")}
+        >
+          {t("ecosystem")}
+        </Link>
+      </nav>
+    </PillContainer>
   );
 };

apps/web/src/components/PillContainer.tsx

@@ -10,6 +10,8 @@ const pillContainerVariants = cva(
       variant: {
         transparent: "bg-white/25 dark:bg-black/25",
         purple: "bg-purple-pill-gradient text-blackMagic",
+        "ink-kit":
+          "ink:bg-background-container ink:text-text-primary px-3 py-1",
       },
       withHover: {
         true: "hover:text-blackMagic/50 dark:hover:text-whiteMagic/50",