🎨 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,6 +56,7 @@
           )}
         />
       </div>
+      <div class="hidden h-5 items-center space-x-2 md:flex">
         <Separator orientation="vertical" />
         {#if githubStars !== undefined}
           <a
@@ -99,5 +102,6 @@
           <span>Submit</span>
         </a>
       </div>
+    </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>