fix mobile nav

mckervinc · Jun 18, 2024 · 1a7323a · 1a7323a
1 parent 964f3bd
commit 1a7323a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/example/src/components/Layout.tsx b/example/src/components/Layout.tsx
@@ -1,4 +1,4 @@
-import Navigation from "@/components/Navigation";
+import MobileNav from "@/components/Navigation";
 import { Snippet } from "@/components/Snippet";
 import { faGithubAlt } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -77,11 +77,11 @@ const Layout = () => {
         {links}
       </div>
       {/* Mobile Nav */}
-      <Navigation>
+      <MobileNav>
         <div className="w-full overflow-y-auto bg-[#1b1c1d] [&>*:last]:border-b-0 [&>*]:border-b [&>*]:border-solid [&>*]:border-b-[#2d2e2f]">
           {links}
         </div>
-      </Navigation>
+      </MobileNav>
       {/* Content */}
       <div className="min-h-screen w-[calc(100%-260px)] overflow-y-auto max-md:mt-[3.3125rem] max-md:w-full">
         {!!title && (

diff --git a/example/src/components/Navigation.tsx b/example/src/components/Navigation.tsx
@@ -1,9 +1,10 @@
+import { cn } from "@/lib/utils";
 import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 
-const Navigation = ({ children }: { children?: React.ReactNode }) => {
+const MobileNav = ({ children }: { children?: React.ReactNode }) => {
   // hooks
   const [isOpen, setIsOpen] = useState(false);
   const { pathname } = useLocation();
@@ -23,7 +24,12 @@ const Navigation = ({ children }: { children?: React.ReactNode }) => {
   }, [isOpen]);
 
   return (
-    <nav className="fixed left-0 top-0 z-20 h-screen w-full overflow-y-auto bg-[#1b1c1d] px-2.5 py-4 text-[rgba(255,255,255,0.9)] md:hidden">
+    <nav
+      className={cn(
+        "fixed left-0 top-0 z-20 w-full overflow-y-auto bg-[#1b1c1d] px-2.5 py-4 text-[rgba(255,255,255,0.9)] md:hidden",
+        isOpen && "h-screen"
+      )}
+    >
       <div>
         <FontAwesomeIcon
           icon={isOpen ? faTimes : faBars}
@@ -36,4 +42,4 @@ const Navigation = ({ children }: { children?: React.ReactNode }) => {
   );
 };
 
-export default Navigation;
+export default MobileNav;