🎨 Initial responsive design + add sidebar menu to header component

src/components/layout/header.svelte

@@ -12,6 +12,7 @@
   import { buttonVariants } from "@/components/ui/button";
   import SvglVersion from "@/components/svglVersion.svelte";
   import SendIcon from "@/components/ui/moving-icons/send-icon.svelte";
+  import SidebarMobileMenu from "@/components/layout/sidebarMobileMenu.svelte";
 
   interface HeaderProps {
     githubStars?: number;
@@ -25,6 +26,7 @@
 >
   <nav class="flex w-full items-center justify-between">
     <div class="flex items-center space-x-3">
+      <SidebarMobileMenu className="md:hidden" />
       <a
         href="/"
         class="flex items-center space-x-2.5 transition-colors hover:text-neutral-700 dark:hover:text-neutral-300"
@@ -32,7 +34,7 @@
         <Svgl size={28} />
         <h2 class="font-onest text-xl font-medium tracking-tight">svgl</h2>
       </a>
-      <SvglVersion />
+      <SvglVersion className="hidden md:block" />
     </div>
     <div class="flex h-5 items-center space-x-2.5">
       <div class="flex items-center space-x-1.5">
@@ -54,50 +56,52 @@
           )}
         />
       </div>
-      <Separator orientation="vertical" />
+      <div class="hidden h-5 items-center space-x-2 md:flex">
-      {#if githubStars !== undefined}
+        <Separator orientation="vertical" />
+        {#if githubStars !== undefined}
+          <a
+            target="_blank"
+            title="GitHub Repository"
+            href={globals.githubUrl}
+            class={cn(
+              buttonVariants({ variant: "ghost" }),
+              "w-fit hover:bg-neutral-200 dark:hover:bg-neutral-800",
+            )}
+          >
+            <Github size={20} />
+            <span class="text-neutral-600 dark:text-neutral-400">
+              {githubStars >= 1000
+                ? `${(githubStars / 1000).toFixed(1)}k`
+                : githubStars.toLocaleString()}
+            </span>
+          </a>
+        {:else}
+          <a
+            target="_blank"
+            title="GitHub Repository"
+            href={globals.githubUrl}
+            class={cn(
+              buttonVariants({ variant: "ghost", size: "icon" }),
+              "hover:bg-neutral-200 dark:hover:bg-neutral-800",
+            )}
+          >
+            <Github size={20} />
+          </a>
+        {/if}
+        <Separator orientation="vertical" />
         <a
           target="_blank"
-          title="GitHub Repository"
+          href={globals.submitUrl}
-          href={globals.githubUrl}
           class={cn(
-            buttonVariants({ variant: "ghost" }),
+            buttonVariants({
-            "w-fit hover:bg-neutral-200 dark:hover:bg-neutral-800",
+              variant: mode.current === "dark" ? "default" : "radial",
+            }),
           )}
         >
-          <Github size={20} />
+          <SendIcon size={14} />
-          <span class="text-neutral-600 dark:text-neutral-400">
+          <span>Submit</span>
-            {githubStars >= 1000
-              ? `${(githubStars / 1000).toFixed(1)}k`
-              : githubStars.toLocaleString()}
-          </span>
         </a>
-      {:else}
+      </div>
-        <a
-          target="_blank"
-          title="GitHub Repository"
-          href={globals.githubUrl}
-          class={cn(
-            buttonVariants({ variant: "ghost", size: "icon" }),
-            "hover:bg-neutral-200 dark:hover:bg-neutral-800",
-          )}
-        >
-          <Github size={20} />
-        </a>
-      {/if}
-      <Separator orientation="vertical" />
-      <a
-        target="_blank"
-        href={globals.submitUrl}
-        class={cn(
-          buttonVariants({
-            variant: mode.current === "dark" ? "default" : "radial",
-          }),
-        )}
-      >
-        <SendIcon size={14} />
-        <span>Submit</span>
-      </a>
     </div>
   </nav>
 </header>

src/components/layout/showSidebarLinks.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { cn } from "@/utils/cn";
+  import { globals } from "@/globals";
+
   import { page } from "$app/state";
   import favoritesStore from "@/stores/favorites.store";
 
@@ -10,6 +12,8 @@
   import House from "@lucide/svelte/icons/house";
   import Heart from "@lucide/svelte/icons/heart";
   import Cloud from "@lucide/svelte/icons/cloud";
+  import Submit from "@lucide/svelte/icons/send";
+  import Github from "@/components/logos/github.svelte";
 
   let favorites = $derived($favoritesStore);
   let favoritesCount = $derived(favoritesStore.getCount(favorites));
@@ -72,3 +76,19 @@
   <Box size={16} />
   <p class="truncate">Extensions</p>
 </a>
+<a
+  href={globals.submitUrl}
+  target="_blank"
+  class={cn(sidebarItemClasses.base, "flex justify-start space-x-3 md:hidden")}
+>
+  <Submit size={16} />
+  <p class="truncate">Submit SVG</p>
+</a>
+<a
+  href={globals.githubUrl}
+  target="_blank"
+  class={cn(sidebarItemClasses.base, "flex justify-start space-x-3 md:hidden")}
+>
+  <Github size={16} />
+  <p class="truncate">GitHub Repository</p>
+</a>

src/components/layout/sidebar.svelte

@@ -9,10 +9,10 @@
 <section>
   <aside
     class={cn(
-      "fixed left-0 h-[calc(100vh-5rem)]",
+      "md:fixed md:left-0 md:h-[calc(100vh-5rem)]",
       "overflow-x-hidden",
       "w-54 pr-2 pl-3",
-      "flex flex-col space-y-3",
+      "hidden flex-col space-y-3 md:flex",
       "bg-neutral-100 dark:bg-neutral-950",
     )}
   >
@@ -24,7 +24,7 @@
       <ShowCategories />
     </nav>
   </aside>
-  <main class={cn("mr-4 mb-4 ml-56", "overflow-hidden")}>
+  <main class={cn("mb-4 px-4 md:mr-4 md:ml-56 md:px-0", "overflow-hidden")}>
     <slot />
   </main>
 </section>

src/components/layout/sidebarMobileMenu.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+
+  import * as Sheet from "@/components/ui/sheet";
+  import { buttonVariants } from "@/components/ui/button";
+  import Separator from "@/components/ui/separator/separator.svelte";
+
+  import MenuIcon from "@lucide/svelte/icons/menu";
+  import Svgl from "@/components/logos/svgl.svelte";
+
+  import ShowCategories from "@/components/layout/showCategories.svelte";
+  import ShowSidebarLinks from "@/components/layout/showSidebarLinks.svelte";
+
+  interface Props {
+    className?: string;
+  }
+
+  let { className }: Props = $props();
+</script>
+
+<Sheet.Root>
+  <Sheet.Trigger
+    title="Open SVGL Menu"
+    class={cn(buttonVariants({ variant: "ghost", size: "icon" }), className)}
+  >
+    <MenuIcon class="size-5" />
+    <span class="sr-only">Open Menu</span>
+  </Sheet.Trigger>
+  <Sheet.Content class="gap-0.5" side="left">
+    <Sheet.Header>
+      <Sheet.Title class="flex items-center space-x-2">
+        <Svgl size={28} />
+        <h2 class="font-onest text-xl font-medium tracking-tight">svgl</h2>
+      </Sheet.Title>
+    </Sheet.Header>
+    <nav class="flex flex-col space-y-0.5 overflow-y-auto px-3 pb-3">
+      <ShowSidebarLinks />
+      <Separator orientation="horizontal" class="my-3" />
+      <ShowCategories />
+    </nav>
+  </Sheet.Content>
+</Sheet.Root>

src/components/svglVersion.svelte

@@ -1,8 +1,14 @@
-<script>
+<script lang="ts">
   import { PUBLIC_SVGL_VERSION } from "$env/static/public";
   import Badge from "@/components/ui/badge/badge.svelte";
+
+  interface Props {
+    className?: string;
+  }
+
+  let { className }: Props = $props();
 </script>
 
 {#if PUBLIC_SVGL_VERSION}
-  <Badge variant="outline">{PUBLIC_SVGL_VERSION}</Badge>
+  <Badge variant="outline" class={className}>{PUBLIC_SVGL_VERSION}</Badge>
 {/if}

src/routes/docs/[...slug]/+page.svelte

@@ -7,6 +7,9 @@
   import Container from "@/components/container.svelte";
   import FileText from "@lucide/svelte/icons/file-text";
 
+  // Markdown:
+  import "@/styles/markdown.css";
+
   let { data }: PageProps = $props();
   const document = $derived(data.document);
 </script>
@@ -18,7 +21,7 @@
 
 <PageCard
   containerClass="mt-0"
-  contentCardClass="max-h-[calc(100vh-5.2rem)] min-h-[calc(100vh-5.2rem)]"
+  contentCardClass="max-h-[calc(100vh-5rem)] min-h-[calc(100vh-5rem)]"
 >
   <PageHeader>
     <div
@@ -31,6 +34,6 @@
     </div>
   </PageHeader>
   <Container className="my-6">
-    <article>{@html document.html}</article>
+    <article class="markdown">{@html document.html}</article>
   </Container>
 </PageCard>