feat: better mobile navigation

2024-01-14 18:06:44 +08:00 · 2024-01-14 18:06:44 +08:00 · dafc8b168b
commit dafc8b168b
parent a27bdf5ea2
7 changed files with 249 additions and 78 deletions
--- a/web/bun.lockb
+++ b/web/bun.lockb
--- a/web/package.json
+++ b/web/package.json
@ -96,6 +96,7 @@
    "unist-util-filter": "^5.0.1",
    "unist-util-visit": "^5.0.0",
    "use-debounce": "^10.0.0",
+    "usehooks-ts": "^2.9.4",
    "uuid": "^9.0.1",
    "zod": "^3.22.4",
    "zustand": "^4.4.7"
--- a/web/src/app/(app)/layout.tsx
+++ b/web/src/app/(app)/layout.tsx
@ -1,9 +1,7 @@
+import { Navbar } from "../../components/Navbar";
 import "./globals.css";
-import { NavbarMenu } from "@/components/NavbarMenu";
-import { Button } from "@/components/ui/button";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { ClerkProvider, OrganizationSwitcher, UserButton } from "@clerk/nextjs";
-import { Github } from "lucide-react";
+import { ClerkProvider } from "@clerk/nextjs";
 import type { Metadata } from "next";
 import meta from "next-gen/config";
 import PlausibleProvider from "next-plausible";
@ -47,45 +45,7 @@ export default function RootLayout({
                <div className="absolute h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
              </div>
              <div className="sticky w-full h-18 flex items-center justify-between gap-4 p-4 border-b border-gray-200">
-                <div className="flex flex-row items-center gap-4">
-                  <a
-                    className="font-bold text-md md:text-lg hover:underline"
-                    href="/"
-                  >
-                    {meta.name}
-                  </a>
-                  <OrganizationSwitcher
-                    appearance={{
-                      elements: {
-                        rootBox: "flex items-center justify-center",
-                      },
-                    }}
-                  />
-                </div>
-                <div className="flex flex-row items-center gap-2">
-                  <NavbarMenu />
-                  <Button
-                    asChild
-                    variant="link"
-                    className="rounded-full aspect-square p-2 mr-4"
-                  >
-                    <a href="/docs">Docs</a>
-                  </Button>
-                  <UserButton />
-                  <Button
-                    asChild
-                    variant="outline"
-                    className="rounded-full aspect-square p-2"
-                  >
-                    <a
-                      target="_blank"
-                      href="https://github.com/BennyKok/comfyui-deploy"
-                    >
-                      <Github />
-                    </a>
-                  </Button>
-                </div>
-                {/* <div></div> */}
+                <Navbar />
              </div>
              <div className="md:px-10 px-6 w-full h-[calc(100dvh-73px)]">
                {children}
--- a/web/src/components/LoadingIcon.tsx
+++ b/web/src/components/LoadingIcon.tsx
@ -1,4 +1,5 @@
 "use client";
+
 import { LoaderIcon } from "lucide-react";
 import * as React from "react";

--- a/web/src/components/Navbar.tsx
+++ b/web/src/components/Navbar.tsx
@ -0,0 +1,86 @@
+"use client";
+
+import { NavbarMenu } from "@/components/NavbarMenu";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { OrganizationSwitcher, UserButton } from "@clerk/nextjs";
+import { Github, Menu } from "lucide-react";
+import meta from "next-gen/config";
+import { useEffect, useState } from "react";
+import { useMediaQuery } from "usehooks-ts";
+
+export function Navbar() {
+  const _isDesktop = useMediaQuery("(min-width: 768px)");
+  const [isDesktop, setIsDesktop] = useState(true);
+  useEffect(() => {
+    setIsDesktop(_isDesktop);
+  }, [_isDesktop]);
+  return (
+    <>
+      <div className="flex flex-row items-center gap-4">
+        {!isDesktop && (
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="ghost" className="w-8 h-8 p-2">
+                <Menu />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="flex flex-col gap-4">
+              <SheetHeader>
+                <SheetTitle className="text-start">Comfy Deploy</SheetTitle>
+              </SheetHeader>
+              <div className="grid h-full grid-rows-[1fr_auto]">
+                <NavbarMenu className=" h-full" />
+                <OrganizationSwitcher
+                  appearance={{
+                    elements: {
+                      rootBox: "flex items-center justify-center",
+                    },
+                  }}
+                />
+              </div>
+            </SheetContent>
+          </Sheet>
+        )}
+        <a className="font-bold text-md md:text-lg hover:underline" href="/">
+          {meta.name}
+        </a>
+        {isDesktop && (
+          <OrganizationSwitcher
+            appearance={{
+              elements: {
+                rootBox: "flex items-center justify-center",
+              },
+            }}
+          />
+        )}
+      </div>
+      <div className="flex flex-row items-center gap-2">
+        {isDesktop && <NavbarMenu />}
+        <Button
+          asChild
+          variant="link"
+          className="rounded-full aspect-square p-2 mr-4"
+        >
+          <a href="/docs">Docs</a>
+        </Button>
+        <UserButton />
+        <Button
+          asChild
+          variant="outline"
+          className="rounded-full aspect-square p-2"
+        >
+          <a target="_blank" href="https://github.com/BennyKok/comfyui-deploy">
+            <Github />
+          </a>
+        </Button>
+      </div>
+    </>
+  );
+}
--- a/web/src/components/NavbarMenu.tsx
+++ b/web/src/components/NavbarMenu.tsx
@ -1,18 +1,13 @@
 "use client";

-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";

-export function NavbarMenu() {
+export function NavbarMenu({ className }: { className?: string }) {
  const pathnames = usePathname();
  const pathname = `/${pathnames.split("/")[1]}`;

@ -34,7 +29,7 @@ export function NavbarMenu() {
  ];

  return (
-    <div className="mr-2">
+    <div className={cn("mr-2", className)}>
      {/* <div className="w-full h-full absolute inset-x-0 top-0 flex items-center justify-center pointer-events-none"> */}
      <Tabs
        defaultValue={pathname}
@ -53,31 +48,19 @@ export function NavbarMenu() {
      </Tabs>
      {/* </div> */}

-      <div className="w-[100px] flex lg:hidden">
-        <Select
-          defaultValue={pathname == "/" ? "" : pathname}
-          onValueChange={(v) => {
-            router.push(v);
-          }}
-        >
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Menu" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              {pages.map((page, i) => (
-                <SelectItem
+      <ScrollArea>
+        <div className="w-full flex lg:hidden flex-col h-full">
+          {pages.map((page) => (
+            <Link
              key={page.name}
-                  value={page.path}
-                  defaultChecked={i == 0}
+              href={page.path}
+              className="p-2 hover:bg-gray-100/20 hover:underline"
            >
              {page.name}
-                </SelectItem>
+            </Link>
          ))}
-            </SelectGroup>
-          </SelectContent>
-        </Select>
        </div>
+      </ScrollArea>
    </div>
  );
 }
--- a/web/src/components/ui/sheet.tsx
+++ b/web/src/components/ui/sheet.tsx
@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}