Merge pull request #86 from Huilensolis/85-fix-nav-menu-on-mobile-is-…

…bugging fix(app): 85 nav bugging and links not working
huilensolis · Feb 4, 2024 · 420bff3 · 420bff3
2 parents 3ef1d4b + df3d64f
commit 420bff3
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 31 deletions.
diff --git a/src/app/(site)/app/components/left-aside/index.tsx b/src/app/(site)/app/components/left-aside/index.tsx
@@ -8,7 +8,6 @@ import { Database } from "@/supabase/types";
 import { Skeleton } from "@/components/ui/skeleton";
 import { LazyImage } from "@/components/feature/lazy-image";
 import { NAV_LINKS } from "../../models/nav-links/";
-import { type ILink } from "../../models/nav-links/nav-links.models";
 import { CustomNavLink } from "@/components/feature/nav/link";
 
 export function AppLeftAside() {

diff --git a/src/app/(site)/app/components/mobile-nav/index.tsx b/src/app/(site)/app/components/mobile-nav/index.tsx
@@ -5,8 +5,8 @@ import { IconLink } from "@/components/feature/nav/icon-link";
 
 export function MobileNavMenu() {
   return (
-    <nav className="w-full py-2 flex items-center justify-center">
-      <ul className="flex items-center justify-center gap-8 py-2 px-8 bg-neutral-200 border border-neutral-300 rounded-full">
+    <nav className="w-full flex items-center justify-center">
+      <ul className="flex items-center justify-center w-full gap-8 py-2 px-8 bg-neutral-200 border-t border-neutral-300">
         {NAV_LINKS.map((navLink) => (
           <li key={navLink.href}>
             <IconLink href={navLink.href} icon={navLink.icon} />

diff --git a/src/app/(site)/app/layout.tsx b/src/app/(site)/app/layout.tsx
@@ -11,7 +11,7 @@ export default function AppLayout({ children }: { children: ReactNode }) {
         <div className="md:flex hidden sticky top-0 left-0 w-full max-w-[300px] h-full min-h-screen">
           <AppLeftAside />
         </div>
-        <div className="md:hidden w-full flex fixed left-0 bottom-0">
+        <div className="md:hidden w-full flex fixed left-0 bottom-0 z-50">
           <MobileNavMenu />
         </div>
         <div className="h-full w-full min-h-screen border-x border-neutral-300 dark:border-cm-lighter-gray">

diff --git a/src/app/(site)/app/settings/components/settings-aside/index.tsx b/src/app/(site)/app/settings/components/settings-aside/index.tsx
@@ -29,13 +29,24 @@ const LINKS: IRLink[] = [
   },
 ];
 
+const LINKS_MAPPED: IRLink[] = LINKS.map((linkItem): IRLink => {
+  const newHref = `/app/settings/section/${linkItem.href}`;
+
+  return {
+    ...linkItem,
+    href: newHref,
+  };
+});
+
+console.log(LINKS_MAPPED);
+
 export function SettingsAside() {
   return (
     <div className="w-full h-full bg-neutral-200 dark:bg-cm-gray">
       <div className="pt-5 flex items-center justify-center">
         <BackwardsNav catchHref="/app" />
       </div>
-      <DesktopAside links={LINKS} />
+      <DesktopAside links={LINKS_MAPPED} />
     </div>
   );
 }
diff --git a/src/components/feature/aside-menu/desktop-aside/index.tsx b/src/components/feature/aside-menu/desktop-aside/index.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { Heading } from "@/components/ui/typography/heading";
-import Link from "next/link";
 import { DesktopAsideProps } from "./desktop-aside.models";
+import { IconLink } from "../../nav/icon-link";
 
 export function DesktopAside({
   links,
@@ -22,26 +22,17 @@ export function DesktopAside({
         </article>
       )}
       <ul className="flex flex-col gap-4 justify-center items-center">
-        {links.map((linkItem) => {
-          const Icon = linkItem.icon;
-
-          return (
-            <li
-              key={linkItem.href}
-              className={`w-full py-3 px-3 text-neutral-700 dark:text-neutral-400 hover:text-neutral-300 transition-all duration-75  ${
-                showBorderOnLinks &&
-                "border-b border-neutral-300 dark:border-neutral-700"
-              }`}
-            >
-              <Link
-                href={linkItem.href}
-                className="w-full flex justify-center items-center gap-4"
-              >
-                <Icon className="w-6 h-6" />
-              </Link>
-            </li>
-          );
-        })}
+        {links.map((linkItem) => (
+          <li
+            key={linkItem.href}
+            className={`w-full text-neutral-700 dark:text-neutral-400 hover:text-neutral-300 transition-all duration-75  ${
+              showBorderOnLinks &&
+              "border-b border-neutral-300 dark:border-neutral-700"
+            }`}
+          >
+            <IconLink href={linkItem.href} icon={linkItem.icon} />
+          </li>
+        ))}
       </ul>
     </nav>
   );

diff --git a/src/components/feature/nav/icon-link/index.tsx b/src/components/feature/nav/icon-link/index.tsx
@@ -3,12 +3,33 @@
 import Link from "next/link";
 import { IRLink } from "../models";
 import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export function IconLink({ href, icon: Icon }: IRLink) {
-  const fullPath = usePathname();
-  const pathSections = fullPath?.split("/");
-  const actualSection = pathSections[pathSections.length - 1];
-  const isActive = href === actualSection;
+  const [isActive, setActive] = useState<boolean>(false);
+
+  const pathName = usePathname();
+
+  useEffect(() => {
+    const isHomeHref = href === "/app";
+
+    if (isHomeHref) {
+      if (pathName === "/app") {
+        setActive(true);
+      } else {
+        setActive(false);
+      }
+      return;
+    }
+
+    const isPathActive = Boolean(
+      pathName === href || pathName.startsWith(href),
+    );
+
+    if (isPathActive) console.log(href);
+
+    setActive(isPathActive);
+  }, [pathName]);
 
   return (
     <Link
@@ -20,7 +41,7 @@ export function IconLink({ href, icon: Icon }: IRLink) {
       <Icon
         className={`w-6 h-6 ${
           isActive
-            ? "dark:text-neutral-50"
+            ? "dark:text-neutral-50 text-neutral-900"
             : "dark:group-hover:text-neutral-50 group-hover:text-neutral-900 dark:text-neutral-400 text-neutral-500"
         }`}
       />