Merge pull request #80 from inkonchain/fix/mobile

fix: bump ink-kit version for new MobileNav styling

package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "3.9.1",
-    "@inkonchain/ink-kit": "0.9.1-beta.11",
+    "@inkonchain/ink-kit": "0.9.1-beta.16",
     "@next/third-parties": "15.1.6",
     "@octokit/auth-app": "7.1.3",
     "@octokit/rest": "21.0.2",

src/app/[locale]/_components/MobileNav.tsx

@@ -28,7 +28,7 @@ export function MobileNav() {
       links={links.map(({ href, icon, label }) => ({
         href,
         asChild: true,
-        icon,
+        leftIcon: icon,
         children: (
           <Link
             href={{ pathname: href, query }}

src/app/[locale]/_components/SideNav.tsx

@@ -1,12 +1,11 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { InkLayoutSideNav, InkNavLink } from "@inkonchain/ink-kit";
+import { InkLayoutSideNav } from "@inkonchain/ink-kit";
 
 import { useRouterQuery } from "@/hooks/useRouterQuery";
 import {
   hrefObjectFromHrefPropWithQuery,
-  HrefProp,
   Link,
   pathFromHrefProp,
   usePathname,
@@ -18,63 +17,44 @@ import { ThemeToggle } from "./ThemeToggle";
 export const SideNav = () => {
   const links = useLinks();
 
+  const query = useRouterQuery();
+  const path = usePathname();
+
+  const [selected, setSelected] = useState(path);
+
+  useEffect(() => {
+    setSelected(path);
+  }, [path]);
+
   return (
     <InkLayoutSideNav
       bottom={
         <div>
           <ThemeToggle />
         </div>
       }
-      links={links.map(({ href, icon, label, exactHref }) => ({
-        href,
-        asChild: true,
-        icon,
-        children: (
-          <SideNavLink href={href} exactHref={exactHref}>
-            {label}
-          </SideNavLink>
-        ),
-      }))}
+      links={links.map(({ href, icon, label, exactHref }) => {
+        const hrefPath = pathFromHrefProp(href);
+        return {
+          href,
+          asChild: true,
+          leftIcon: icon,
+          active: exactHref
+            ? selected === hrefPath
+            : selected.startsWith(hrefPath),
+          children: (
+            <Link
+              href={hrefObjectFromHrefPropWithQuery(href, query)}
+              prefetch
+              onClick={() => {
+                setSelected(href);
+              }}
+            >
+              {label}
+            </Link>
+          ),
+        };
+      })}
     />
   );
 };
-
-function SideNavLink({
-  className,
-  href,
-  exactHref,
-  children,
-  ...rest
-}: {
-  className?: string;
-  href: HrefProp;
-  exactHref?: boolean;
-  children: React.ReactNode;
-}) {
-  const path = usePathname();
-  const query = useRouterQuery();
-  const hrefPath = pathFromHrefProp(href);
-  const hrefObject = hrefObjectFromHrefPropWithQuery(href, query);
-  const [selected, setSelected] = useState(
-    exactHref ? path === hrefPath : path.startsWith(hrefPath)
-  );
-  useEffect(() => {
-    setSelected(exactHref ? path === hrefPath : path.startsWith(hrefPath));
-  }, [path, hrefPath, exactHref]);
-
-  return (
-    <InkNavLink
-      onClick={() => {
-        setSelected(true);
-      }}
-      active={
-        (exactHref ? path === hrefPath : path.startsWith(hrefPath)) || selected
-      }
-      asChild
-    >
-      <Link href={hrefObject} prefetch={true} {...rest}>
-        {children}
-      </Link>
-    </InkNavLink>
-  );
-}

src/app/[locale]/page.tsx

@@ -5,7 +5,6 @@ import { PageView } from "@/components/PageView";
 import { newLayoutContainerClasses } from "@/components/styles/container";
 
 import { HomeApps } from "./_components/Home/HomeApps";
-import { HomeEvent } from "./_components/Home/HomeEvent";
 import { HomeSmallTag } from "./_components/Home/HomeSmallTag";
 import { HomeTagLine } from "./_components/Home/HomeTagLine";
 import { HomeTitle } from "./_components/Home/HomeTitle";