From f6344341efaf14c17eea9907eaa0be3fe503fdef Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 16 Mar 2023 00:39:36 +0530
Subject: [PATCH] feat: Add mermaidchart logo

---
 .vscode/settings.json            |  7 ++++---
 src/lib/components/Navbar.svelte | 22 ++++++++++++++++++----
 static/mermaidchart-logo.svg     |  1 +
 3 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100755 static/mermaidchart-logo.svg

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6b40e0cc..c4bdcadd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,17 +1,18 @@
 {
   "editor.formatOnSave": true,
   "cSpell.words": [
-    "Browserslist",
-    "KROKI",
-    "Serde",
     "asyncable",
+    "Browserslist",
     "corg",
     "cssnano",
     "daisyui",
     "esserializer",
+    "KROKI",
     "localstorage",
+    "mermaidchart",
     "mindmap",
     "pako",
+    "Serde",
     "serdes",
     "tailwindcss"
   ],
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 0a7717ff..defb3c53 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -10,9 +10,10 @@
   import Theme from './Theme.svelte';
 
   interface Link {
-    title: string;
     href: string;
+    title?: string;
     icon?: string;
+    img?: string;
   }
   const links: Link[] = [
     {
@@ -32,9 +33,12 @@
       href: 'https://github.com/mermaid-js/mermaid-cli'
     },
     {
-      title: '',
       href: 'https://github.com/mermaid-js/mermaid-live-editor',
       icon: 'fab fa-github fa-lg'
+    },
+    {
+      href: 'https://mermaidchart.com',
+      img: '/mermaidchart-logo.svg'
     }
   ];
 </script>
@@ -59,13 +63,18 @@
   <Theme />
   <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
     <ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
-      {#each links as { title, href, icon }}
+      {#each links as { title, href, icon, img }}
         <li>
           <a class="btn btn-ghost" target="_blank" rel="noreferrer" {href}>
             {#if icon}
               <i class={icon} />
+            {:else if img}
+              <img src={img} alt={title} />
             {/if}
-            {title}</a>
+            {#if title}
+              {title}
+            {/if}
+          </a>
         </li>
       {/each}
     </ul>
@@ -79,4 +88,9 @@
   .navbar {
     z-index: 10000;
   }
+
+  img {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
 </style>
diff --git a/static/mermaidchart-logo.svg b/static/mermaidchart-logo.svg
new file mode 100755
index 00000000..d7c8b59e
--- /dev/null
+++ b/static/mermaidchart-logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16"><defs><style>.cls-1{fill:#ff3670;}.cls-2{fill:#fff;}</style></defs><rect class="cls-1" width="490.16" height="490.16" rx="84.61"/><path class="cls-2" d="M407.48,111.18A165.2,165.2,0,0,0,245.08,220,165.2,165.2,0,0,0,82.68,111.18a165.5,165.5,0,0,0,72.06,143.64,88.81,88.81,0,0,1,38.53,73.45v50.86H296.9V328.27a88.8,88.8,0,0,1,38.52-73.45,165.41,165.41,0,0,0,72.06-143.64Z"/><path class="cls-2" d="M160.63,328.27a56.09,56.09,0,0,0-24.27-46.49,198.74,198.74,0,0,1-28.54-23.66A196.87,196.87,0,0,1,82.53,227V379.13h78.1Z"/><path class="cls-2" d="M329.53,328.27a56.09,56.09,0,0,1,24.27-46.49,198.74,198.74,0,0,0,28.54-23.66A196.87,196.87,0,0,0,407.63,227V379.13h-78.1Z"/></svg>