feat: Navbar

src/lib/components/Navbar.svelte

@@ -125,9 +125,9 @@
             );
           }} />
 
-        <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}">
+          Playground <span class="text-sm opacity-50">- more features, no account required</span>
+        </a>
       {/if}
     </div>
   </div>
@@ -180,17 +180,16 @@
       </li> -->
 
       <!-- <DropdownNavMenu label="Documentation" links={documentationLinks} /> -->
-
-      <DropdownNavMenu icon={GithubIcon} class="fa-lg" links={githubLinks} />
-      <Separator orientation="vertical" />
-
-      <Button onclick={toggleMode} variant="outline" size="icon">
+      <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" />
-        <span class="sr-only">Toggle theme</span>
       </Button>
+
+      <DropdownNavMenu icon={GithubIcon} class="fa-lg" links={githubLinks} />
+      <Separator orientation="vertical" />
+
       {@render children()}
     </div>
   </div>

src/lib/components/ui/button/button.svelte

@@ -12,6 +12,7 @@
         outline:
           'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
+        accent: 'bg-accent text-accent-foreground hover:bg-accent/80 shadow-sm',
         ghost: 'hover:bg-primary hover:text-primary-foreground',
         link: 'text-primary underline-offset-4 hover:underline'
       },

src/routes/edit/+page.svelte

@@ -133,12 +133,13 @@
 
 <div class="flex h-full flex-col overflow-hidden">
   <Navbar>
-    <Button size="sm">Share</Button>
     <Toggle bind:pressed={isHistoryOpen}>
       <HistoryIcon />
     </Toggle>
+    <Button size="sm">Share</Button>
     {#if env.isEnabledMermaidChartLinks}
       <Button
+        variant="accent"
         size="sm"
         href={`${MCBaseURL}/app/plugin/save?state=${$stateStore.serialized}`}
         target="_blank">