fix: close mobile header

airjp73 · Jun 11, 2024 · 3186235 · 3186235
1 parent eb322d0
commit 3186235
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 30 deletions.
diff --git a/apps/docs-v2/app/ui/layout/Header.tsx b/apps/docs-v2/app/ui/layout/Header.tsx
@@ -8,21 +8,10 @@ import { GithubIcon } from "../icons/GithubIcon";
 import { MobileNavigation } from "./MobileNavigation";
 import { TopLevelNavItem } from "./Navigation";
 
-// import {
-//   MobileNavigation,
-//   useIsInsideMobileNavigation,
-// } from '@/components/MobileNavigation'
-// import { useMobileNavigationStore } from '@/components/MobileNavigation'
-// import { MobileSearch, Search } from '@/components/Search'
-// import { ThemeToggle } from '@/components/ThemeToggle'
-
 export const Header = forwardRef<
   React.ElementRef<"div">,
   { className?: string }
 >(function Header({ className }, ref) {
-  // let { isOpen: mobileNavIsOpen } = useMobileNavigationStore()
-  // let isInsideMobileNavigation = useIsInsideMobileNavigation()
-
   let { scrollY } = useScroll();
   let bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9]);
   let bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8]);
@@ -33,11 +22,6 @@ export const Header = forwardRef<
       className={clsx(
         className,
         "fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80"
-        // !isInsideMobileNavigation &&
-        //   'backdrop-blur-sm lg:left-72 xl:left-80 dark:backdrop-blur',
-        // isInsideMobileNavigation
-        //   ? 'bg-white dark:bg-zinc-900'
-        //   : 'bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]',
       )}
       style={
         {
@@ -46,14 +30,7 @@ export const Header = forwardRef<
         } as React.CSSProperties
       }
     >
-      <div
-        className={clsx(
-          "absolute inset-x-0 top-full h-px transition"
-          // (isInsideMobileNavigation || !mobileNavIsOpen) &&
-          //   "bg-zinc-900/7.5 dark:bg-white/7.5",
-        )}
-      />
-      {/* <Search /> */}
+      <div className={clsx("absolute inset-x-0 top-full h-px transition")} />
       <div className="flex items-center gap-5 lg:hidden">
         <MobileNavigation />
         <Link to="/" aria-label="Home">

diff --git a/apps/docs-v2/app/ui/layout/MobileNavigation.tsx b/apps/docs-v2/app/ui/layout/MobileNavigation.tsx
@@ -4,25 +4,37 @@ import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
 import { Navigation, TopLevelNavItem } from "./Navigation";
 import { Button } from "../button";
 import { GithubIcon } from "../icons/GithubIcon";
-import { Link } from "@remix-run/react";
+import { Link, useLocation, useNavigation } from "@remix-run/react";
 import { Logo } from "../branding/Logo";
+import { useEffect } from "react";
 
 export const useMobileNavigationStore = create<{
   isOpen: boolean;
   open: () => void;
   close: () => void;
   toggle: () => void;
   setOpen: (open: boolean) => void;
-}>()((set) => ({
+  routeChange: (route: string) => void;
+  route?: string;
+}>()((set, get) => ({
   isOpen: false,
   open: () => set({ isOpen: true }),
   close: () => set({ isOpen: false }),
   toggle: () => set((state) => ({ isOpen: !state.isOpen })),
   setOpen: (open: boolean) => set({ isOpen: open }),
+  routeChange: (route: string) => {
+    if (route === get().route) return;
+    set({ route, isOpen: false });
+  },
 }));
 
 export function MobileNavigation() {
   let store = useMobileNavigationStore();
+  const location = useLocation();
+
+  useEffect(() => {
+    store.routeChange(location.pathname);
+  }, [location.pathname, store]);
 
   return (
     <Sheet open={store.isOpen} onOpenChange={store.setOpen}>

diff --git a/apps/docs-v2/app/ui/layout/Navigation.tsx b/apps/docs-v2/app/ui/layout/Navigation.tsx
@@ -3,10 +3,9 @@
 import { ReactNode, useRef } from "react";
 import { Link, useLocation } from "@remix-run/react";
 import clsx from "clsx";
-import { AnimatePresence, motion, useIsPresent } from "framer-motion";
-import { Button } from "../button";
-import { GithubIcon } from "../icons/GithubIcon";
+import { AnimatePresence, motion } from "framer-motion";
 import { cn } from "~/lib/utils";
+import { useMobileNavigationStore } from "./MobileNavigation";
 
 interface NavGroup {
   title: string;
@@ -225,7 +224,7 @@ export const navigation: Array<NavGroup> = [
     title: "Guides",
     links: [
       { title: "Introduction", href: "/" },
-      { title: "Quickstart", href: "/quickstart" },
+      { title: "Test doc", href: "/test-doc" },
       { title: "SDKs", href: "/sdks" },
       { title: "Authentication", href: "/authentication" },
       { title: "Pagination", href: "/pagination" },