From f16180ec593c5e62c0537aad911418ef25f880f6 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 13 Mar 2025 15:14:42 -0700
Subject: [PATCH] feat: Responsiveness

---
 src/lib/components/Actions.svelte         |   2 +-
 src/lib/components/DropdownNavMenu.svelte |   5 +-
 src/lib/components/FloatingToolbar.svelte |   2 +-
 src/lib/components/MainMenu.svelte        |   2 +-
 src/lib/components/Navbar.svelte          | 117 +++++++---------------
 src/lib/util/promos/January2025.svelte    |   2 +-
 src/routes/edit/+page.svelte              |  55 +---------
 7 files changed, 46 insertions(+), 139 deletions(-)

diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
index 3f865923..67c7b3f2 100644
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -212,7 +212,7 @@ ${svgString}`);
   </div>
 {/snippet}
 
-<Card title="Actions" isOpen isStackable icon={{ component: DownloadIcon, class: 'rotate-180' }}>
+<Card title="Actions" isStackable icon={{ component: DownloadIcon, class: 'rotate-180' }}>
   <div class="flex min-w-fit flex-col gap-2 p-2">
     <div class="flex w-full items-center gap-2 whitespace-nowrap py-2">
       PNG size
diff --git a/src/lib/components/DropdownNavMenu.svelte b/src/lib/components/DropdownNavMenu.svelte
index e21cb382..c48cf349 100644
--- a/src/lib/components/DropdownNavMenu.svelte
+++ b/src/lib/components/DropdownNavMenu.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import * as Popover from '$/components/ui/popover';
   import type { Component } from 'svelte';
+  import { Button } from './ui/button';
 
   interface Props {
     links: { title: string; href: string }[];
@@ -13,7 +14,9 @@
 
 <Popover.Root>
   <Popover.Trigger class="flex items-center gap-0">
-    <svelte:component this={icon} class={className} />
+    <Button variant="ghost" size="sm">
+      <svelte:component this={icon} class={className} />
+    </Button>
   </Popover.Trigger>
   <Popover.Content>
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
diff --git a/src/lib/components/FloatingToolbar.svelte b/src/lib/components/FloatingToolbar.svelte
index c2e3f645..128078b8 100644
--- a/src/lib/components/FloatingToolbar.svelte
+++ b/src/lib/components/FloatingToolbar.svelte
@@ -8,6 +8,6 @@
   let { children }: Props = $props();
 </script>
 
-<div class="flex h-12 items-center justify-between gap-2 rounded-2xl bg-muted p-3">
+<div class="hidden h-12 items-center justify-between gap-2 rounded-2xl bg-muted p-3 md:flex">
   {@render children()}
 </div>
diff --git a/src/lib/components/MainMenu.svelte b/src/lib/components/MainMenu.svelte
index df0d26d5..a36c5d1f 100644
--- a/src/lib/components/MainMenu.svelte
+++ b/src/lib/components/MainMenu.svelte
@@ -34,7 +34,7 @@
 {/snippet}
 
 <Popover.Root>
-  <Popover.Trigger class="flex items-center gap-0">
+  <Popover.Trigger class="flex shrink-0 items-center gap-0">
     <img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" />
   </Popover.Trigger>
   <Popover.Content align="start" class="overflow-hidden  p-0" sideOffset={16}>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index a7f27776..fe1bf3e4 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -15,9 +15,10 @@
   import { MCBaseURL } from '$lib/util/util';
   import type { ComponentProps, Snippet } from 'svelte';
   import GithubIcon from '~icons/fa-brands/github';
-  import CloseIcon from '~icons/fa/close';
+  import CloseIcon from '~icons/material-symbols/close-rounded';
   import DropdownNavMenu from './DropdownNavMenu.svelte';
   import MainMenu from './MainMenu.svelte';
+  import { Button } from './ui/button';
 
   interface Props {
     children: Snippet;
@@ -27,11 +28,7 @@
 
   const { isEnabledMermaidChartLinks } = env;
 
-  let isMenuOpen = $state(false);
   const isReferral = document.referrer.includes(MCBaseURL);
-  function toggleMenu() {
-    isMenuOpen = !isMenuOpen;
-  }
 
   type Links = ComponentProps<typeof DropdownNavMenu>['links'];
 
@@ -79,15 +76,16 @@
       <activePromotion.component {closeBanner} />
     </div>
     {#snippet closeBanner()}
-      <button
+      <Button
         title="Dismiss banner"
-        aria-label="Dismiss banner"
+        variant="ghost"
+        size="sm"
         onclick={() => {
           dismissPromotion(activePromotion?.id);
           activePromotion = undefined;
         }}>
-        <CloseIcon class="px-2" />
-      </button>
+        <CloseIcon />
+      </Button>
     {/snippet}
   </div>
 {/if}
@@ -100,90 +98,43 @@
       id="switcher"
       class="flex items-center justify-center gap-4 font-medium"
       class:flex-row-reverse={isReferral}>
-      <a href="/">
+      <a href="/" class="whitespace-nowrap text-accent">
         {#if !isReferral}
           Mermaid
         {/if}
         Live Editor
       </a>
       {#if isEnabledMermaidChartLinks}
-        <Switch
-          id="editorMode"
-          class="data-[state=checked]:bg-secondary"
-          checked={isReferral}
-          onclick={() => {
-            logEvent('playgroundToggle', { isReferred: isReferral });
-            window.open(
-              `${MCBaseURL}/play#${$stateStore.serialized}`,
-              '_self',
-              // Do not send referrer header, if the user already came from playground
-              isReferral ? 'noreferrer' : ''
-            );
-          }} />
+        <div class=" hidden items-center justify-center gap-4 md:flex">
+          <Separator orientation="vertical" />
+          <Switch
+            id="editorMode"
+            class="data-[state=checked]:bg-secondary"
+            checked={isReferral}
+            onclick={() => {
+              logEvent('playgroundToggle', { isReferred: isReferral });
+              window.open(
+                `${MCBaseURL}/play#${$stateStore.serialized}`,
+                '_self',
+                // Do not send referrer header, if the user already came from playground
+                isReferral ? 'noreferrer' : ''
+              );
+            }} />
 
-        <a href="{MCBaseURL}/play#{$stateStore.serialized}">
-          Playground <span class="text-sm opacity-50">- more features, no account required</span>
-        </a>
+          <a href="{MCBaseURL}/play#{$stateStore.serialized}" class="whitespace-nowrap">
+            Playground <span class="hidden text-sm opacity-50 lg:inline"
+              >- more features, no account required</span>
+          </a>
+        </div>
       {/if}
     </div>
   </div>
 
-  <label
-    for="menu-toggle"
-    class={isMenuOpen ? 'hidden' : 'pointer-cursor fixed right-4 z-[1000] lg:hidden'}>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      class="fill-current"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20">
-      <title>Menu</title>
-      <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-    </svg>
-  </label>
-
-  <!-- Cross SVG -->
-  <label
-    for="menu-toggle"
-    class={isMenuOpen ? 'pointer-cursor fixed right-4 z-[1000] lg:hidden' : 'hidden'}>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      class="fill-current"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20">
-      <title>Cross</title>
-      <line x1="5" y1="5" x2="15" y2="15" stroke="white" stroke-width="2" />
-      <line x1="5" y1="15" x2="15" y2="5" stroke="white" stroke-width="2" />
-    </svg>
-  </label>
-
-  <input
-    class="hidden"
-    type="checkbox"
-    id="menu-toggle"
-    bind:checked={isMenuOpen}
-    onclick={toggleMenu} />
-
-  <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
-    <div
-      class="h-full items-center justify-between gap-2 overflow-hidden pt-4 text-base lg:flex lg:pt-0">
-      <DropdownNavMenu icon={GithubIcon} links={githubLinks} />
-      <Separator orientation="vertical" />
-
-      {@render children()}
-    </div>
+  <div
+    id="menu"
+    class="hidden h-full w-full flex-nowrap items-center justify-between gap-3 overflow-hidden pt-4 text-base md:flex md:w-auto md:items-center md:pt-0">
+    <DropdownNavMenu icon={GithubIcon} links={githubLinks} />
+    <Separator orientation="vertical" />
+    {@render children()}
   </div>
 </nav>
-
-<style>
-  #menu-toggle:checked + #menu {
-    position: absolute;
-    top: 2.5rem;
-    padding: 1rem 0;
-    background: #661ae6;
-    display: flex;
-  }
-</style>
diff --git a/src/lib/util/promos/January2025.svelte b/src/lib/util/promos/January2025.svelte
index 13cadaf4..ff7518af 100644
--- a/src/lib/util/promos/January2025.svelte
+++ b/src/lib/util/promos/January2025.svelte
@@ -137,7 +137,7 @@
         in:fade={{ delay: 800 }}
         out:fade={{ duration: 1000 }}>
         <span class="text-sm tracking-wider text-white">{currentTagline.label}</span>
-        <Button size="sm" class="bg-[#1E1A2E] font-semibold tracking-wider">Try now</Button>
+        <Button size="sm" class="font-semibold tracking-wider">Try now</Button>
       </a>
     {/key}
   </div>
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index 4a009bba..cc6dd5d4 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -133,7 +133,7 @@
 
 <div class="flex h-full flex-col overflow-hidden">
   <Navbar>
-    <Toggle bind:pressed={isHistoryOpen}>
+    <Toggle bind:pressed={isHistoryOpen} size="sm">
       <HistoryIcon />
     </Toggle>
     <Button size="sm">Share</Button>
@@ -183,63 +183,16 @@
       <Resizable.Handle class="mr-1 opacity-0" />
       <Resizable.Pane>
         <div class="relative flex h-full flex-1 flex-col overflow-hidden">
-          <!-- <Card title="Diagram" isClosable={false}>
-            {#snippet actions()}
-              <div class="flex flex-row items-center gap-2">
-                <label
-                  class="label flex cursor-pointer gap-1 py-0"
-                  title="Rough mode is in beta. Features like clickable nodes, Pan & Zoom, will be disabled."
-                  for="rough">
-                  <span>Rough</span>
-                  <input
-                    type="checkbox"
-                    class="toggle {$stateStore.rough ? 'btn-secondary' : 'toggle-primary'}"
-                    id="rough"
-                    bind:checked={$inputStateStore.rough} />
-                </label>
-                <label
-                  class="label flex cursor-pointer gap-1 py-0"
-                  title={$stateStore.rough ? 'Pan & Zoom is disabled in rough mode.' : ''}
-                  for="panZoom">
-                  <span>Pan & Zoom</span>
-                  <input
-                    type="checkbox"
-                    class="toggle {$stateStore.panZoom ? 'btn-secondary' : 'toggle-primary'}"
-                    id="panZoom"
-                    disabled={$stateStore.rough}
-                    bind:checked={$inputStateStore.panZoom} />
-                </label>
-                <a
-                  href={`${base}/view#${$stateStore.serialized}`}
-                  target="_blank"
-                  class="btn btn-secondary btn-xs gap-1"
-                  title="View diagram in new page"
-                  ><ExternalLinkAltIcon />Full screen</a>
-                {#if env.isEnabledMermaidChartLinks}
-                  <a
-                    href={`${MCBaseURL}/app/plugin/save?state=${$stateStore.serialized}`}
-                    target="_blank"
-                    class="btn btn-secondary btn-xs gap-1 bg-[#FF3570]"
-                    title="Save diagram in Mermaid Chart"
-                    ><img
-                      src="./mermaidchart-logo.svg"
-                      class="size-5"
-                      alt="Mermaid chart logo" />Save to Mermaid Chart</a>
-                {/if}
-              </div>
-            {/snippet} -->
-
           <Resizable.PaneGroup direction="horizontal" autoSaveId="viewAndHistory" class="">
             <Resizable.Pane minSize={15} class="relative">
-              <!-- <div class="flex-1 overflow-auto"> -->
               <View {panZoomState} />
               <div class="absolute right-0 top-0"><PanZoomToolbar {panZoomState} /></div>
               <div class="absolute bottom-0 right-0"><VersionSecurityToolbar /></div>
               <div class="absolute bottom-0 left-5"><SyncRoughToolbar /></div>
             </Resizable.Pane>
             {#if isHistoryOpen}
-              <Resizable.Handle class="ml-2 opacity-0" />
-              <Resizable.Pane minSize={25} defaultSize={40}>
+              <Resizable.Handle class="ml-2 hidden opacity-0 md:block" />
+              <Resizable.Pane minSize={25} defaultSize={40} class="hidden md:block">
                 <div class="flex h-full flex-grow flex-col">
                   <History />
                 </div>
@@ -247,7 +200,7 @@
             {/if}
           </Resizable.PaneGroup>
 
-          <div class="mx-2 rounded p-2 shadow md:hidden">
+          <div class="rounded bg-primary p-2 text-center shadow md:hidden">
             Code editing not supported on mobile. Please use a desktop browser.
           </div>
         </div>