add: working on menu

magitools · Oct 28, 2024 · a8abbac · a8abbac
1 parent 3457ceb
commit a8abbac
Showing 1 changed file with 62 additions and 25 deletions.
diff --git a/resources/js/Components/Header.svelte b/resources/js/Components/Header.svelte
@@ -1,12 +1,72 @@
 <script lang="ts">
     import { Button } from "$lib/components/ui/button";
     import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-    import { page, inertia } from "@inertiajs/svelte";
+    import { page, inertia, Link } from "@inertiajs/svelte";
     import { KeyRound, Newspaper, NotebookPen, PowerOff } from "lucide-svelte";
+    import * as Sheet from "$lib/components/ui/sheet/index.js";
+    import { Menu } from "lucide-svelte";
 </script>
 
 <div class="w-full flex justify-between bg-background py-6 px-4 items-center">
-    <a use:inertia href={route("app.articles.index")}>MagiEdit</a>
+    <div class="flex items-center space-x-6">
+        <a use:inertia href={route("app.articles.index")}>MagiEdit</a>
+        <nav
+            class="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6"
+        >
+            <a
+                href={route("app.articles.index")}
+                use:inertia
+                class={route("app.articles.index").includes($page.url)
+                    ? "text-foreground hover:text-foreground transition-colors"
+                    : "text-muted-foreground hover:text-foreground transition-colors"}
+            >
+                Articles
+            </a>
+            <a
+                href={route("app.publishers.index")}
+                use:inertia
+                class={route("app.publishers.index").includes($page.url)
+                    ? "text-foreground hover:text-foreground transition-colors"
+                    : "text-muted-foreground hover:text-foreground transition-colors"}
+            >
+                Publishers
+            </a>
+        </nav>
+        <Sheet.Root>
+            <Sheet.Trigger asChild let:builder>
+                <Button
+                    variant="outline"
+                    size="icon"
+                    class="shrink-0 md:hidden"
+                    builders={[builder]}
+                >
+                    <Menu class="h-5 w-5" />
+                </Button>
+            </Sheet.Trigger>
+            <Sheet.Content side="left">
+                <nav class="grid gap-6 text-lg font-medium">
+                    <a
+                        href={route("app.articles.index")}
+                        use:inertia
+                        class={route("app.articles.index").includes($page.url)
+                            ? "text-foreground hover:text-foreground transition-colors"
+                            : "text-muted-foreground hover:text-foreground transition-colors"}
+                    >
+                        Articles
+                    </a>
+                    <a
+                        href={route("app.publishers.index")}
+                        use:inertia
+                        class={route("app.publishers.index").includes($page.url)
+                            ? "text-foreground hover:text-foreground transition-colors"
+                            : "text-muted-foreground hover:text-foreground transition-colors"}
+                    >
+                        Publishers
+                    </a>
+                </nav>
+            </Sheet.Content>
+        </Sheet.Root>
+    </div>
     <div>
         {#if $page.props.auth.authed}
             <DropdownMenu.Root>
@@ -27,29 +87,6 @@
                         </DropdownMenu.Item>
                     </DropdownMenu.Group>
                     <DropdownMenu.Separator />
-                    <DropdownMenu.Group>
-                        <DropdownMenu.Item>
-                            <a
-                                use:inertia
-                                href={route("app.articles.index")}
-                                class="inline-flex items-center gap-2"
-                            >
-                                <NotebookPen />
-                                Articles
-                            </a>
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item>
-                            <a
-                                use:inertia
-                                href={route("app.publishers.index")}
-                                class="inline-flex items-center gap-2"
-                            >
-                                <Newspaper />
-                                Publishers
-                            </a>
-                        </DropdownMenu.Item>
-                    </DropdownMenu.Group>
-                    <DropdownMenu.Separator />
                     <DropdownMenu.Group>
                         <DropdownMenu.Item>
                             <a