refactor: enhance Navbar component structure and improve link rendering

.devcontainer/devcontainer.json

@@ -25,7 +25,7 @@
       "extensions": [
         "dbaeumer.vscode-eslint",
         "IronGeek.vscode-env",
-        "bungcip.better-toml",
+        "tamasfe.even-better-toml",
         "esbenp.prettier-vscode",
         "ms-azuretools.vscode-docker",
         "github.vscode-github-actions",

apps/web-new/app/components/Navbar/Navbar.tsx

@@ -14,7 +14,14 @@ import classes from "./Navbar.module.css";
 import { Settings } from "./Settings";
 import { UserLoginStateControl } from "./UserLoginStateControl";
 
-const data = [
+interface NavItem {
+  label: string;
+  link: string;
+  icon: React.ComponentType<{ className?: string; stroke?: number }>;
+  children?: NavItem[];
+}
+
+const data: NavItem[] = [
   { label: "Home", link: "/", icon: IconHome },
   { label: "Premium", link: "/premium", icon: IconDiamond },
   {
@@ -50,11 +57,11 @@ const data = [
   },
 ];
 
-export function Navbar() {
-  const { isDrawerOpen, toggleDrawer, closeDrawer, openDrawer } = useDrawer();
-  const rootData = useRouteLoaderData("root");
-
-  const links = data.map((item) => (
+const renderNavLinks = (
+  items: NavItem[],
+  closeDrawer: () => void,
+): React.ReactNode => {
+  return items.map((item) => (
     <NavLink
       className={classes.link}
       href={item.link}
@@ -68,24 +75,16 @@ export function Navbar() {
         }
       }}
     >
-      {item.children &&
-        item.children.map((child) => (
-          <NavLink
-            className={classes.link}
-            href={child.link}
-            key={child.label}
-            label={child.label}
-            leftSection={
-              <child.icon className={classes.linkIcon} stroke={1.5} />
-            }
-            renderRoot={(props) => <RemixNavLink to={child.link} {...props} />}
-            onClick={() => {
-              closeDrawer();
-            }}
-          />
-        ))}
+      {item.children && renderNavLinks(item.children, closeDrawer)}
     </NavLink>
   ));
+};
+
+export function Navbar() {
+  const { isDrawerOpen, toggleDrawer, closeDrawer, openDrawer } = useDrawer();
+  const rootData = useRouteLoaderData("root");
+
+  const links = renderNavLinks(data, closeDrawer);
 
   return (
     <>

apps/web-new/package.json

@@ -39,7 +39,9 @@
     "react-router": "^7.1.5",
     "remix-auth": "4.1.0",
     "remix-auth-oauth2": "^3.2.2",
-    "remix-utils": "^8.1.0"
+    "remix-utils": "^8.1.0",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20250204.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dougley/frugal",
-  "packageManager": "pnpm@9.5.0",
+  "packageManager": "pnpm@10.2.0",
   "version": "0.0.0",
   "license": "MIT",
   "devDependencies": {