settings nav

apps/web/components/layout.tsx

@@ -19,9 +19,9 @@ const user = {
     "https://pbs.twimg.com/profile_images/1382036502390181888/4BT30oTM_400x400.jpg",
 };
 const navigation = [
-  { name: "Dashboard", href: "/dashboard", current: true },
+  { name: "Dashboard", href: "/dashboard", current: false },
   { name: "Documents", href: "/documents", current: false },
-  { name: "Settings", href: "/settings" },
+  { name: "Settings", href: "/settings", current: true },
 ];
 const userNavigation = [
   { name: "Your Profile", href: "/settings" },
@@ -42,7 +42,7 @@ function classNames(...classes: any) {
 export default function Layout({ children }: any) {
   const router = useRouter();
   navigation.forEach((element) => {
-    element.current = element.href == router.route;
+    element.current = router.route.startsWith(element.href);
   });
 
   return (

apps/web/components/settings.tsx

@@ -12,6 +12,8 @@ import {
   XMarkIcon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
+import { useRouter } from "next/router";
+import Link from "next/link";
 
 const user = {
   name: "Debbie Lewis",
@@ -22,9 +24,24 @@ const user = {
 };
 
 const subNavigation = [
-  { name: "Profile", href: "#", icon: UserCircleIcon, current: true },
-  { name: "Password", href: "#", icon: KeyIcon, current: false },
-  { name: "Account", href: "#", icon: CogIcon, current: false },
+  {
+    name: "Profile",
+    href: "/settings/profile",
+    icon: UserCircleIcon,
+    current: true,
+  },
+  {
+    name: "Password",
+    href: "/settings/password",
+    icon: KeyIcon,
+    current: false,
+  },
+  {
+    name: "Account",
+    href: "/settings/account",
+    icon: CogIcon,
+    current: false,
+  },
 ];
 
 function classNames(...classes: any) {
@@ -37,6 +54,13 @@ export default function Setttings() {
   const [allowCommenting, setAllowCommenting] = useState(true);
   const [allowMentions, setAllowMentions] = useState(true);
 
+  const router = useRouter();
+  console.log(router.route);
+
+  subNavigation.forEach((element) => {
+    element.current = element.href == router.route;
+  });
+
   return (
     <div>
       <header className="py-10">
@@ -52,7 +76,7 @@ export default function Setttings() {
             <aside className="py-6 lg:col-span-3">
               <nav className="space-y-1">
                 {subNavigation.map((item) => (
-                  <a
+                  <Link
                     key={item.name}
                     href={item.href}
                     className={classNames(
@@ -73,7 +97,7 @@ export default function Setttings() {
                       aria-hidden="true"
                     />
                     <span className="truncate">{item.name}</span>
-                  </a>
+                  </Link>
                 ))}
               </nav>
             </aside>

apps/web/pages/settings/account.tsx

@@ -0,0 +1,2 @@
+import SettingsPage from ".";
+export default SettingsPage;

apps/web/pages/settings/index.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
-import Layout from "../components/layout";
-import Settings from "../components/settings";
-import type { NextPageWithLayout } from "./_app";
+import Layout from "../../components/layout";
+import Settings from "../../components/settings";
+import type { NextPageWithLayout } from "../_app";
 
 const SettingsPage: NextPageWithLayout = () => {
   return <Settings></Settings>;

apps/web/pages/settings/password.tsx

@@ -0,0 +1,2 @@
+import SettingsPage from ".";
+export default SettingsPage;

apps/web/pages/settings/profile.tsx

@@ -0,0 +1,2 @@
+import SettingsPage from ".";
+export default SettingsPage;