Merge pull request #1795 from mermaid-js/sidv/mainMenu

Update Menu items

src/app.css

@@ -33,6 +33,7 @@
     --destructive: hsl(0 72.22% 50.59%);
     --destructive-foreground: hsl(210 40% 98%);
     --border: hsl(214.3 31.8% 91.4%);
+    --border-dark: hsl(214.3 31.8% 81.4%);
     --input: hsl(214.3 31.8% 91.4%);
     --ring: hsl(222.2 84% 4.9%);
     --radius: 0.75rem;
@@ -55,6 +56,7 @@
     --destructive: hsl(0 62.8% 30.6%);
     --destructive-foreground: hsl(210 40% 98%);
     --border: hsl(217.2 32.6% 17.5%);
+    --border-dark: hsl(217.2 32.6% 27.5%);
     --input: hsl(217.2 32.6% 17.5%);
     --ring: hsl(212.7 26.8% 83.9%);
   }
@@ -77,6 +79,7 @@
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-border: var(--border);
+  --color-border-dark: var(--border-dark);
   --color-input: var(--input);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);

src/app.postcss

@@ -1,68 +0,0 @@
-@import '@fontsource-variable/recursive/crsv.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 240 10% 91%;
-    --primary-foreground: 255 20% 15%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 228 24% 96%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 340 100% 44%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 72.22% 50.59%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.75rem;
-  }
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 30%;
-    --primary-foreground: 222.2 47.4% 90%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 340 100% 44%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply h-screen w-screen overflow-hidden bg-background text-foreground;
-  }
-}
-
-body {
-  font-family: 'Recursive Variable', sans-serif;
-}
-
-.d {
-  @apply border border-red-500;
-}

src/lib/components/MainMenu.svelte

@@ -1,56 +1,95 @@
 <script lang="ts">
   import McWrapper from '$/components/McWrapper.svelte';
-  import ThemeIcon from '$/components/ThemeIcon.svelte';
   import * as Popover from '$/components/ui/popover';
   import { Switch } from '$/components/ui/switch';
   import { urlsStore } from '$/util/state';
   import { cn } from '$/utils';
   import { mode, setMode } from 'mode-watcher';
-  import type { Component } from 'svelte';
+  import type { Component, Snippet } from 'svelte';
+  import MermaidTailIcon from '~icons/custom/mermaid-tail';
   import AddIcon from '~icons/material-symbols/add-2-rounded';
   import BookIcon from '~icons/material-symbols/book-2-outline-rounded';
-  import PluginIcon from '~icons/material-symbols/extension-outline';
-  import HomeIcon from '~icons/material-symbols/house-outline-rounded';
+  import DuplicateIcon from '~icons/material-symbols/content-copy-outline-rounded';
+  import ContrastIcon from '~icons/material-symbols/contrast';
+  import PluginIcon from '~icons/material-symbols/electrical-services-rounded';
+  import MenuIcon from '~icons/material-symbols/menu-rounded';
   import CommunityIcon from '~icons/material-symbols/person-play-outline-rounded';
   import PlaygroundIcon from '~icons/material-symbols/shape-line-outline';
   import MermaidChartIcon from './MermaidChartIcon.svelte';
 
-  const menuItems = $derived([
-    { label: 'New Diagram', icon: AddIcon, href: $urlsStore.new },
-    { label: 'Home', icon: HomeIcon, href: 'https://mermaid.js.org/' },
-    { label: 'Documentation', icon: BookIcon, href: 'https://mermaid.js.org/intro/' },
-    { label: 'Community', icon: CommunityIcon, href: 'https://discord.gg/sKeNQX4Wtj' }
-  ]);
+  interface MenuItem {
+    label: string;
+    icon: Component;
+    href: string;
+    class?: string;
+    sharesData?: boolean;
+    checkDiagramType?: boolean;
+    isSectionEnd?: boolean;
+    renderer: (item: Omit<MenuItem, 'renderer'>) => ReturnType<Snippet>;
+  }
 
-  const mermaidChartMenuItems = $derived([
+  const menuItems: MenuItem[] = $derived([
+    { label: 'New', icon: AddIcon, href: $urlsStore.new, renderer: menuItem },
+    { label: 'Duplicate', icon: DuplicateIcon, href: window.location.href, renderer: menuItem },
     {
-      label: 'Edit in Playground',
+      href: $urlsStore.mermaidChart({ medium: 'main_menu' }).playground,
       icon: PlaygroundIcon,
-      href: $urlsStore.mermaidChart({ medium: 'main_menu' }).playground
+      isSectionEnd: true,
+      label: 'Edit in Playground',
+      renderer: mcMenuItem
+    },
+    {
+      label: 'Mermaid.js',
+      icon: MermaidTailIcon,
+      href: 'https://mermaid.js.org/',
+      renderer: menuItem
+    },
+    {
+      label: 'Documentation',
+      icon: BookIcon,
+      href: 'https://mermaid.js.org/intro/',
+      renderer: menuItem
+    },
+    {
+      label: 'Community',
+      icon: CommunityIcon,
+      href: 'https://discord.gg/sKeNQX4Wtj',
+      renderer: menuItem
     },
     {
       checkDiagramType: false,
       href: $urlsStore.mermaidChart({ medium: 'main_menu' }).plugins,
       icon: PluginIcon,
       label: 'Plugins',
+      renderer: mcMenuItem,
       sharesData: false
     },
+    {
+      href: '#',
+      icon: ContrastIcon,
+      isSectionEnd: true,
+      label: 'Dark Mode',
+      renderer: darkModeMenuItem
+    },
     {
       checkDiagramType: false,
+      class: 'text-accent border-b-0',
       href: $urlsStore.mermaidChart({ medium: 'main_menu' }).home,
       icon: MermaidChartIcon,
-      label: 'MermaidChart',
+      label: 'Mermaid',
+      renderer: mcMenuItem,
       sharesData: false
     }
   ]);
 </script>
 
-{#snippet menuItem(options: { label: string; icon: Component; href: string; class?: string })}
+{#snippet menuItem(options: MenuItem)}
   <a
     href={options.href}
     target="_blank"
     class={cn(
-      'flex items-center justify-start gap-2 border-b bg-muted p-2 px-3 hover:bg-background',
+      'flex items-center justify-start gap-2 border-b-2 p-2 px-3 hover:bg-muted',
+      options.isSectionEnd && 'border-border-dark',
       options.class
     )}>
     <options.icon class="size-5" />
@@ -58,36 +97,40 @@
   </a>
 {/snippet}
 
+{#snippet mcMenuItem(item: MenuItem)}
+  <McWrapper
+    side="right"
+    labelPrefix={item.sharesData === false ? 'Opens a new tab in' : undefined}
+    sharesData={item.sharesData}
+    shouldCheckDiagramType={item.checkDiagramType}>
+    {@render menuItem(item)}
+  </McWrapper>
+{/snippet}
+
+{#snippet darkModeMenuItem(options: MenuItem)}
+  <div
+    class={cn(
+      'flex cursor-pointer items-center justify-between border-b-2 px-3 py-2 hover:bg-muted',
+      options.isSectionEnd && 'border-border-dark',
+      options.class
+    )}>
+    <span class="flex items-center gap-2">
+      <ContrastIcon />
+      Dark Mode
+    </span>
+    <Switch
+      checked={$mode === 'dark'}
+      onCheckedChange={(dark) => setMode(dark ? 'dark' : 'light')} />
+  </div>
+{/snippet}
+
 <Popover.Root>
   <Popover.Trigger class="shrink-0">
-    <img class="size-6" src="/favicon.svg" alt="Mermaid Live Editor" />
+    <MenuIcon class="size-6" />
   </Popover.Trigger>
-  <Popover.Content align="start" class="flex flex-col overflow-hidden p-0" sideOffset={16}>
-    {#each menuItems as item (item.label)}
-      {@render menuItem(item)}
-    {/each}
-
-    <div class="flex items-center justify-between border-b bg-muted px-3 py-2 hover:bg-background">
-      <span class="flex items-center gap-2">
-        <ThemeIcon />
-        Dark Mode
-      </span>
-      <Switch
-        checked={$mode === 'dark'}
-        onCheckedChange={(dark) => setMode(dark ? 'dark' : 'light')} />
-    </div>
-
-    {#each mermaidChartMenuItems as item (item.label)}
-      <McWrapper
-        side="right"
-        labelPrefix={item.sharesData === false ? 'Opens a new tab in' : undefined}
-        sharesData={item.sharesData}
-        shouldCheckDiagramType={item.checkDiagramType}>
-        {@render menuItem({
-          ...item,
-          class: 'text-accent bg-background hover:bg-muted'
-        })}
-      </McWrapper>
+  <Popover.Content align="start" class="flex flex-col overflow-hidden border-2 p-0" sideOffset={16}>
+    {#each menuItems as { renderer, ...item } (item.label)}
+      {@render renderer(item)}
     {/each}
   </Popover.Content>
 </Popover.Root>

src/lib/components/Navbar.svelte

@@ -17,6 +17,7 @@
   import { urlsStore } from '$lib/util/state';
   import { MCBaseURL } from '$lib/util/util';
   import type { ComponentProps, Snippet } from 'svelte';
+  import MermaidIcon from '~icons/custom/mermaid';
   import CloseIcon from '~icons/material-symbols/close-rounded';
   import GithubIcon from '~icons/mdi/github';
   import DropdownNavMenu from './DropdownNavMenu.svelte';
@@ -83,8 +84,9 @@
 {/if}
 
 <nav class="z-50 flex p-4 sm:p-6">
-  <div class="flex flex-1 items-center gap-4">
+  <div class="flex flex-1 items-center gap-2">
     <MainMenu />
+    <MermaidIcon class="size-6" />
     <div
       id="switcher"
       class="flex items-center justify-center gap-4 font-medium"

static/icons/mermaid-tail.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg viewBox="40 40 410 410" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z" fill="currentColor"/>
+</svg>

static/icons/mermaid.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg viewBox="0 0 490 490" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M490.16,84.61C490.16,37.912 452.248,0 405.55,0L84.61,0C37.912,0 0,37.912 0,84.61L0,405.55C0,452.248 37.912,490.16 84.61,490.16L405.55,490.16C452.248,490.16 490.16,452.248 490.16,405.55L490.16,84.61Z" style="fill:#ff3670;"/>
+    <path d="M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z" style="fill:white;fill-rule:nonzero;"/>
+</svg>