feat: MainMenu

src/lib/components/DropdownNavMenu.svelte

@@ -4,27 +4,16 @@
 
   interface Props {
     links: { title: string; href: string }[];
-    label?: string;
     icon?: Component;
     class?: string;
   }
 
-  let { links, label, icon, class: className }: Props = $props();
+  let { links, icon, class: className }: Props = $props();
 </script>
 
 <Popover.Root>
   <Popover.Trigger class="flex items-center gap-0">
     <svelte:component this={icon} class={className} />
-
-    {#if label}
-      <span>{label}</span>
-    {/if}
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 1792 1792"
-      class="ml-1 inline-block h-4 w-4 fill-current"
-      ><path
-        d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" /></svg>
   </Popover.Trigger>
   <Popover.Content>
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->

src/lib/components/MainMenu.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import * as Popover from '$/components/ui/popover';
+  import { Switch } from '$/components/ui/switch';
+  import { mode, setMode } from 'mode-watcher';
+</script>
+
+<Popover.Root>
+  <Popover.Trigger class="flex items-center gap-0">
+    <img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" />
+  </Popover.Trigger>
+  <Popover.Content align="start">
+    <div class="flex flex-col">
+      <div class="flex items-center justify-between">
+        Dark Mode <Switch
+          checked={$mode === 'dark'}
+          onCheckedChange={(dark) => setMode(dark ? 'dark' : 'light')} />
+      </div>
+    </div>
+  </Popover.Content>
+</Popover.Root>

src/lib/components/Navbar.svelte

@@ -7,20 +7,17 @@
 </script>
 
 <script lang="ts">
-  import { Button } from '$/components/ui/button';
   import { Separator } from '$/components/ui/separator';
   import { Switch } from '$/components/ui/switch';
   import { env } from '$lib/util/env';
   import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
   import { stateStore } from '$lib/util/state';
   import { MCBaseURL } from '$lib/util/util';
-  import { toggleMode } from 'mode-watcher';
   import type { ComponentProps, Snippet } from 'svelte';
   import GithubIcon from '~icons/fa-brands/github';
   import CloseIcon from '~icons/fa/close';
-  import MoonIcon from '~icons/fa6-solid/moon';
-  import SunIcon from '~icons/fa6-solid/sun';
   import DropdownNavMenu from './DropdownNavMenu.svelte';
+  import MainMenu from './MainMenu.svelte';
 
   interface Props {
     children: Snippet;
@@ -97,9 +94,8 @@
 
 <nav class="z-50 flex p-6">
   <div class="flex flex-1 items-center gap-4">
-    <Button variant="link" size="icon" href="/">
-      <img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" />
-    </Button>
+    <MainMenu />
+
     <div
       id="switcher"
       class="flex items-center justify-center gap-4 font-medium"
@@ -172,18 +168,9 @@
     onclick={toggleMenu} />
 
   <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
-    <!-- <span class="text-sm">v{version}</span> -->
     <div
       class="h-full items-center justify-between gap-2 overflow-hidden pt-4 text-base lg:flex lg:pt-0">
-      <!-- <DropdownNavMenu label="Documentation" links={documentationLinks} /> -->
-      <Button onclick={toggleMode} variant="outline" size="icon" title="Toggle theme">
-        <SunIcon
-          class="rotate-0 scale-100 transition-all duration-200 dark:-rotate-90 dark:scale-0" />
-        <MoonIcon
-          class="absolute rotate-90 scale-0 transition-all duration-200 dark:rotate-0 dark:scale-100" />
-      </Button>
-
-      <DropdownNavMenu icon={GithubIcon} class="fa-lg" links={githubLinks} />
+      <DropdownNavMenu icon={GithubIcon} links={githubLinks} />
       <Separator orientation="vertical" />
 
       {@render children()}