ADD: Profile/category add button mock

src/components/navbar/Navbar.vue

@@ -43,7 +43,7 @@
               <MenubarShortcut>⌘N</MenubarShortcut>
             </MenubarItem>
             <MenubarSeparator />
-            <MenubarItem class="flex justify-between" @click.prevent="store.cycleScreenOrientation">
+            <MenubarItem class="flex justify-between" @click="store.cycleScreenOrientation">
               <p>Orientation: </p>
               <p>{{ store.screenOrientation }}°</p>
             </MenubarItem>

src/components/profile/ProfileManager.vue

@@ -3,7 +3,9 @@
     <div>
       <div
         class="w-full h-12 px-4 flex items-center justify-between flex-nowrap text-nowrap bg-zinc-900">
-        <button class="flex flex-1 items-center h-full min-w-0 font-heading" @click="showProfileConfig=store.selectedProfile && !showProfileConfig">
+        <button
+          class="flex flex-1 items-center h-full min-w-0 font-heading"
+          @click="showProfileConfig=store.selectedProfile && !showProfileConfig">
           <component :is="showProfileConfig ? ArrowLeft : List" class="w-5 h-full mr-1 shrink-0" />
           <ScrambleText
             :text="showProfileConfig ? store.selectedProfile?.name : $t('profiles.title')"
@@ -15,6 +17,8 @@
             :delay="500"
             :text="`(${store.profiles.length}/${ maxProfiles})`" />
         </button>
+        <DropdownMenu>
+          <DropdownMenuTrigger>
             <Transition name="fade">
               <button
                 v-if="!showProfileConfig"
@@ -23,6 +27,16 @@
                 <Plus class="h-4" />
               </button>
             </Transition>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              Category
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
       <Separator />
     </div>
@@ -99,6 +113,7 @@ import { useStore } from '@/store.js'
 import ProfileButton from '@/components/profile/ProfileButton.vue'
 import ProfileConfig from '@/components/profile/ProfileConfig.vue'
 import draggable from 'vuedraggable'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 
 defineProps({
   showFilter: {

src/lang/en.json

@@ -90,8 +90,8 @@
       "about": "About Device",
       "connect": "Connect",
       "disconnect": "Disconnect",
-      "export": "Export Profiles",
+      "export": "Export Settings",
-      "import": "Import Profiles",
+      "import": "Import Settings",
       "preferences": "Preferences",
       "quit": "Quit",
       "title": "Device"