From f7f3e35fcfb3fd701ecd9d96eb4123cd1c70f183 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 11 Nov 2024 01:45:12 +0530
Subject: [PATCH] feat: Add dropdown navbar items

---
 src/lib/components/DropdownNavMenu.svelte | 44 ++++++++++++
 src/lib/components/Navbar.svelte          | 83 +++++++++--------------
 2 files changed, 76 insertions(+), 51 deletions(-)
 create mode 100644 src/lib/components/DropdownNavMenu.svelte

diff --git a/src/lib/components/DropdownNavMenu.svelte b/src/lib/components/DropdownNavMenu.svelte
new file mode 100644
index 00000000..530b8582
--- /dev/null
+++ b/src/lib/components/DropdownNavMenu.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  interface Props {
+    links: { title: string; href: string }[];
+    label?: string;
+    icon?: string;
+  }
+
+  let { links, label, icon }: Props = $props();
+</script>
+
+<div class="dropdown dropdown-end">
+  <button class="btn btn-ghost">
+    {#if icon}
+      <i class={icon}></i>
+    {/if}
+    {#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>
+  </button>
+  <div
+    class="dropdown-content menu top-px mt-14 h-fit w-fit overflow-y-auto bg-base-200 text-base-content shadow-2xl">
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <ul tabindex="0" class="menu compact p-4">
+      {#each links as link}
+        <li>
+          <a
+            role="menuitem"
+            tabindex="0"
+            class="whitespace-nowrap underline"
+            target="_blank"
+            href={link.href}>
+            {link.title}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index fdf6d9da..0fcdcdaa 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -10,6 +10,8 @@
   import { env } from '$lib/util/env';
   import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
   import { stateStore } from '$lib/util/state';
+  import type { ComponentProps } from 'svelte';
+  import DropdownNavMenu from './DropdownNavMenu.svelte';
   import Privacy from './Privacy.svelte';
   import Theme from './Theme.svelte';
 
@@ -21,42 +23,28 @@
     isMenuOpen = !isMenuOpen;
   }
 
-  interface Link {
-    href: string;
-    title?: string;
-    icon?: string;
-    img?: string;
-  }
+  type Links = ComponentProps<typeof DropdownNavMenu>['links'];
 
-  let links: Link[] = [
+  const githubLinks: Links = [
+    { title: 'Mermaid JS', href: 'https://github.com/mermaid-js/mermaid' },
     {
-      title: 'Documentation',
-      href: 'https://mermaid.js.org/intro/getting-started.html'
+      title: 'Mermaid Live Editor',
+      href: 'https://github.com/mermaid-js/mermaid-live-editor'
     },
     {
-      title: 'Tutorial',
-      href: 'https://mermaid.js.org/ecosystem/tutorials.html'
-    },
-    {
-      title: 'Mermaid',
-      href: 'https://github.com/mermaid-js/mermaid'
-    },
-    {
-      title: 'CLI',
+      title: 'Mermaid CLI',
       href: 'https://github.com/mermaid-js/mermaid-cli'
-    },
-    {
-      href: 'https://github.com/mermaid-js/mermaid-live-editor',
-      icon: 'fab fa-github fa-lg'
     }
   ];
 
-  if (isEnabledMermaidChartLinks) {
-    links.push({
-      href: 'https://mermaidchart.com',
-      img: './mermaidchart-logo.svg'
-    });
-  }
+  const documentationLinks: Links = [
+    { title: 'Getting started', href: 'https://mermaid.js.org/intro/getting-started.html' },
+    { title: 'Tutorials', href: 'https://mermaid.js.org/ecosystem/tutorials.html' },
+    {
+      title: 'Integrations',
+      href: 'https://mermaid.js.org/ecosystem/integrations-community.html'
+    }
+  ];
 
   let activePromotion = $state(getActivePromotion());
 
@@ -94,7 +82,7 @@
   </div>
 {/if}
 
-<div class="navbar bg-primary p-0 shadow-lg">
+<div class="navbar z-50 bg-primary p-0 shadow-lg">
   <div class="mx-2 flex-1 px-2">
     <span class="flex items-center justify-center gap-2 font-bold">
       <a href="/">Mermaid Live Editor</a>
@@ -154,26 +142,28 @@
     onclick={toggleMenu} />
 
   <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
-    <span class="text-xs font-thin">v{version}</span>
-    <Theme />
+    <span class="text-sm">v{version}</span>
     <ul class="items-center justify-between pt-4 text-base lg:flex lg:pt-0">
       <li>
         <Privacy />
       </li>
-      {#each links as { title, href, icon, img }}
+      <li>
+        <Theme />
+      </li>
+      <li>
+        <DropdownNavMenu label="Documentation" links={documentationLinks} />
+      </li>
+      <li>
+        <DropdownNavMenu icon="fab fa-github fa-lg" links={githubLinks} />
+      </li>
+
+      {#if isEnabledMermaidChartLinks}
         <li>
-          <a class="btn btn-ghost" target="_blank" {href}>
-            {#if icon}
-              <i class={icon}></i>
-            {:else if img}
-              <img src={img} alt={title} />
-            {/if}
-            {#if title}
-              {title}
-            {/if}
+          <a class="btn btn-ghost" target="_blank" href="https://mermaidchart.com">
+            <img class="size-6" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
           </a>
         </li>
-      {/each}
+      {/if}
     </ul>
   </div>
 </div>
@@ -186,13 +176,4 @@
     background: #661ae6;
     display: flex;
   }
-
-  .navbar {
-    z-index: 10000;
-  }
-
-  img {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
 </style>