UPD: Navbar buttons

src/App.vue

@@ -2,7 +2,7 @@
 import ProfileManager from '@/components/profile/ProfileManager.vue'
 import DevicePreview from '@/components/device/DevicePreview.vue'
 import ConfigPane from '@/components/config/ConfigPane.vue'
-import Navbar from '@/components/Navbar.vue'
+import Navbar from '@/components/navbar/Navbar.vue'
 import { useStore } from '@/store'
 
 const store = useStore()

src/components/navbar/MenubarButton.vue

@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="app-titlebar-button text-muted-foreground flex items-center rounded-sm px-3 py-1 text-sm font-medium hover:bg-accent hover:text-accent-foreground"
+  >
+    <slot />
+  </button>
+</template>

src/components/navbar/Navbar.vue

@@ -25,7 +25,7 @@
       </div>
       <div class="flex gap-2">
         <MenubarMenu>
-          <MenubarTrigger v-t="'navbar.device.title'" class="app-titlebar-button text-muted-foreground" />
+          <MenubarTrigger v-t="'navbar.device.title'" class="app-titlebar-button" />
           <MenubarContent>
             <!-- TODO: Switch keyboard shortcut icons based on platform -->
             <MenubarItem>
@@ -48,24 +48,40 @@
             </MenubarItem>
           </MenubarContent>
         </MenubarMenu>
+        <MenubarButton class="app-titlebar-button" @click="electron.openExternal('https://discord.gg/jgRd77YN5T')">
+          Community
+        </MenubarButton>
         <MenubarMenu>
-          <MenubarTrigger
+          <MenubarTrigger class="app-titlebar-button">Help</MenubarTrigger>
-            class="app-titlebar-button text-muted-foreground"
+          <MenubarContent>
-            @click="electron.openExternal('https://discord.gg/jgRd77YN5T')">Community
+            <!-- TODO: Switch keyboard shortcut icons based on platform -->
-          </MenubarTrigger>
+            <MenubarItem>
-        </MenubarMenu>
+              {{ $t('navbar.device.disconnect') }}
-        <MenubarMenu>
+              <MenubarShortcut>⌘D</MenubarShortcut>
-          <MenubarTrigger class="app-titlebar-button text-muted-foreground">Help</MenubarTrigger>
+            </MenubarItem>
+            <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>{{ $t('navbar.device.export') }}
+              <MenubarShortcut>⌘E</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>{{ $t('navbar.device.import') }}
+              <MenubarShortcut>⌘I</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>{{ $t('navbar.device.quit') }}
+              <MenubarShortcut>⌘Q</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
         </MenubarMenu>
       </div>
       <div class="grow" />
-      <MenubarMenu>
+      <MenubarButton
-        <MenubarTrigger
+        class="app-titlebar-button border-2"
-          class="app-titlebar-button text-muted-foreground border-2"
         @click="store.setConnected(!store.connected)">
         {{ store.connected ? 'Disconnect' : 'Connect' }}
-        </MenubarTrigger>
+      </MenubarButton>
-      </MenubarMenu>
       <div v-if="!isMacOS" class="flex h-full">
         <button
           v-if="minimizable"
@@ -91,18 +107,19 @@
 <script setup>
 import {
   Menubar,
-  MenubarMenu,
-  MenubarShortcut,
-  MenubarSeparator,
-  MenubarItem,
-  MenubarTrigger,
   MenubarContent,
-} from '@/components/ui/menubar/index.js'
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from '@/components/ui/menubar'
 import ScrambleText from '@/components/common/ScrambleText.vue'
-import { X, Square, Minus } from 'lucide-vue-next'
+import { Minus, Square, X } from 'lucide-vue-next'
 import { onMounted, ref } from 'vue'
 import { Separator } from '@/components/ui/separator'
 import { useStore } from '@/store'
+import MenubarButton from '@/components/navbar/MenubarButton.vue'
 
 const store = useStore()