{children}
diff --git a/web/src/components/LoadingIcon.tsx b/web/src/components/LoadingIcon.tsx
index b925661..d04b52c 100644
--- 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";
diff --git a/web/src/components/Navbar.tsx b/web/src/components/Navbar.tsx
new file mode 100644
index 0000000..2a86d45
--- /dev/null
+++ 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 (
+ <>
+
+ {!isDesktop && (
+
+
+
+
+
+
+ Comfy Deploy
+
+
+
+
+
+
+
+ )}
+
+ {meta.name}
+
+ {isDesktop && (
+
+ )}
+
+
+ {isDesktop &&
}
+
+
+
+
+
+ );
+}
diff --git a/web/src/components/NavbarMenu.tsx b/web/src/components/NavbarMenu.tsx
index f56e1b9..9504325 100644
--- 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 (
-
+
{/*
*/}
{/*
*/}
-
-
-
+
+
+ {pages.map((page) => (
+
+ {page.name}
+
+ ))}
+
+
);
}
diff --git a/web/src/components/ui/sheet.tsx b/web/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..a37f17b
--- /dev/null
+++ 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
,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, 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,
+ VariantProps {}
+
+const SheetContent = React.forwardRef<
+ React.ElementRef,
+ SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+ Sheet,
+ SheetPortal,
+ SheetOverlay,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+}