fix: settings menu properly visible on windows

unxsist · Aug 12, 2024 · d5dadd0 · d5dadd0
1 parent 5f3438a
commit d5dadd0
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -13,11 +13,21 @@ import TabProvider from "./providers/TabProvider";
 import DialogProvider from "./providers/DialogProvider";
 import DialogHandler from "./components/DialogHandler.vue";
 import UpdateHandler from "./components/UpdateHandler.vue";
+import { type as getOsType } from "@tauri-apps/api/os";
+
+const osType = ref('');
+
+onMounted(() => {
+  getOsType().then(os => {
+    osType.value = os;
+  })
+})
 </script>
 
 <template>
   <AppLayout
     class="bg-accent text-sm rounded-lg border border-border overflow-hidden"
+    :class="`os:${osType}`"
   >
     <Suspense>
       <SettingsContextProvider>

diff --git a/src/assets/main.postcss b/src/assets/main.postcss
@@ -135,3 +135,10 @@ body,
   background-color: transparent;
   display: none;
 }
+
+/* Windows specific changes */
+.os\:Windows_NT {
+  [navigation-settings] {
+    @apply mb-8;
+  }
+}
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -337,10 +337,11 @@ watch([context, namespace, clusterAuthenticated], () => {
           </NavigationGroup>
         </ScrollArea>
       </div>
-      <div class="flex-shrink-0 border-t -ml-2 pl-2 pt-2 mb-0">
+      <div navigation-settings class="flex-shrink-0 border-t -ml-2 pl-2 pt-2 mb-0">
         <NavigationItem
           icon="settings"
           title="Settings"
+          :can-pin="false"
           :to="{ name: 'Settings' }"
         />
       </div>

diff --git a/src/components/NavigationItem.vue b/src/components/NavigationItem.vue
@@ -19,10 +19,12 @@ const props = withDefaults(
     title: string;
     to: RouteLocationRaw;
     pinned?: boolean;
+    canPin?: boolean;
     shortcut?: number | undefined;
   }>(),
   {
     pinned: false,
+    canPin: true,
     shortcut: undefined,
   }
 );
@@ -67,7 +69,7 @@ onUnmounted(() => {
         </span>
       </span>
     </div>
-    <div class="hidden group-hover/main:block">
+    <div class="hidden group-hover/main:block" v-if="canPin">
       <div
         class="group/pin"
         @click.prevent="$emit(pinned ? 'unpinned' : 'pinned')"