@necrolab/dashboard 0.4.221 → 0.5.2

package/src/components/ui/Navbar.vue

@@ -1,8 +1,7 @@
 <template>
     <div class="navbar" :class="{ 'force-z': menuOpen }">
-        <div :class="`component-container ios-wrapper flex items-center relative ${landscapeIos ? 'ios-wrapper' : ''}`">
+        <div :class="['component-container ios-wrapper flex items-center relative', { 'ios-wrapper': landscapeIos }]">
             <!-- Brand -->
-            <!-- <h3 class="font-bold text-white mr-4 z-30">Necro Lab</h3> -->
             <img src="@/assets/img/logo_trans.png" class="h-6 lg:h-8 mr-4 z-30 object-cover" alt="Logo: Necro" />
             <!-- Navlinks -->
             <ul class="hidden lg:flex">
@@ -16,18 +15,16 @@
                     <router-link to="/console"><ConsoleIcon /><span class="hidden xl:block">Console</span></router-link>
                 </li>
                 <li>
-                    <router-link to="/profiles"
-                        ><img src="/img/groups.svg" class="xl:mr-2" /><span class="hidden xl:block"
-                            >Profiles</span
-                        ></router-link
-                    >
+                    <router-link to="/profiles">
+                        <GroupIcon class="xl:mr-2" />
+                        <span class="hidden xl:block">Profiles</span>
+                    </router-link>
                 </li>
                 <li>
-                    <router-link to="/accounts"
-                        ><img src="/img/mail.svg" class="xl:mr-2" /><span class="hidden xl:block"
-                            >Accounts</span
-                        ></router-link
-                    >
+                    <router-link to="/accounts">
+                        <MailIcon class="xl:mr-2" />
+                        <span class="hidden xl:block">Accounts</span>
+                    </router-link>
                 </li>
                 <li>
                     <router-link to="/filter"><FilterIcon /><span class="hidden xl:block">Filter</span></router-link>
@@ -45,7 +42,6 @@
             <h4 v-else class="hidden lg:block text-white text-sm font-medium">
                 <span class="text-lightgray">Loading </span>
             </h4>
-            <!-- <div class="hidden lg:block w-10 h-10 rounded-full bg-dark-400"></div> -->
             <img
                 v-if="ui.profile?.profilePicture"
                 :src="ui.profile?.profilePicture"
@@ -76,10 +72,16 @@
                         <router-link to="/console"><ConsoleIcon />Console</router-link>
                     </li>
                     <li @click="toggleMenu">
-                        <router-link to="/profiles"><img src="/img/groups.svg" class="mr-2" />Profiles</router-link>
+                        <router-link to="/profiles">
+                            <GroupIcon class="mr-2" />
+                            Profiles
+                        </router-link>
                     </li>
                     <li @click="toggleMenu">
-                        <router-link to="/accounts"><img src="/img/mail.svg" class="mr-2" />Accounts</router-link>
+                        <router-link to="/accounts">
+                            <MailIcon class="mr-2" />
+                            Accounts
+                        </router-link>
                     </li>
                     <li @click="toggleMenu">
                         <router-link to="/filter"><FilterIcon />Filter</router-link>
@@ -95,17 +97,18 @@
                         <span class="text-lightgray">Logged in as </span>
                         <span class="font-black"> {{ ui.profile?.name }}</span>
                     </h4>
-                    <!-- <div class="w-10 h-10 rounded-full bg-light-300"></div> -->
                     <img :src="ui.profile?.profilePicture" alt="" class="h-10 w-10 rounded-full" />
                 </div>
 
-                <div class="mx-auto mt-6 mb-14 flex gap-3">
-                    <span class="bg-dark-500 rounded-full text-sm shadow-lg p-2 px-3 text-light-400"
-                        >Dashboard: v{{ dashVersion }}</span
-                    >
-                    <span class="bg-dark-500 rounded-full text-sm shadow-lg p-2 px-3 text-light-400"
-                        >Bot: v{{ ui.botVersion }}</span
-                    >
+                <div class="mx-auto mt-6 mb-14 flex gap-3 items-center">
+                    <div class="version-badge">
+                        <span class="version-label">Dashboard</span>
+                        <span class="version-number">v{{ dashVersion }}</span>
+                    </div>
+                    <div class="version-badge">
+                        <span class="version-label">Bot</span>
+                        <span class="version-number">v{{ ui.botVersion }}</span>
+                    </div>
                 </div>
             </div>
         </transition>
@@ -115,48 +118,180 @@
 .navbar {
     @apply border-b py-5 fixed w-full;
     top: 0;
-    z-index: 1;
+    left: 0;
+    z-index: 1000;
+    background: oklch(0.1822 0 0 / 0.95);
     backdrop-filter: blur(23px);
-    border-color: #323340;
+    -webkit-backdrop-filter: blur(23px);
+    border-color: oklch(0.26 0 0);
+
+    // Consistent padding base
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+    
+    // Only add safe area top padding for portrait notch devices
+    @supports (padding-top: env(safe-area-inset-top)) {
+        @media (max-device-width: 430px) and (orientation: portrait) {
+            padding-top: max(1.25rem, env(safe-area-inset-top));
+        }
+    }
+
+    // Extend background above viewport for notch area with theme gradient
+    &::before {
+        content: "";
+        position: absolute;
+        top: -100px;
+        left: 0;
+        right: 0;
+        height: 100px;
+        background: oklch(0.1822 0 0);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        z-index: -1;
+    }
+
     ul {
         @apply gap-x-4;
-        li {
-            a {
-                @apply flex  text-white text-sm border-none h-10 items-center px-4 rounded-lg;
+
+        // Global SVG normalization - force all icons to be identical
+        svg {
+            width: 20px !important;
+            height: 20px !important;
+            display: block !important;
+            flex-shrink: 0 !important;
+            box-sizing: border-box !important;
+        }
+
+        li a {
+            @apply flex text-white text-sm items-center rounded-lg;
+            height: 40px;
+            border: 1px solid transparent;
+            border-left: 3px solid transparent;
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+
+            svg {
+                @apply mr-2;
+            }
+
+            &.router-link-exact-active {
+                border-bottom: 2px solid oklch(0.72 0.15 145);
+                color: oklch(0.72 0.15 145);
+                background: oklch(0.72 0.15 145 / 0.08);
+                margin-bottom: -2px;
+
+                // Mobile styling
+                @media (max-width: 1023px) {
+                    border: 2px solid oklch(0.72 0.15 145);
+                    color: oklch(0.72 0.15 145);
+                    background: oklch(0.72 0.15 145 / 0.08);
+                    padding: 0.5rem 0.75rem;
+                    border-radius: 0.5rem;
+                    margin-bottom: 0;
+                }
+            }
+        }
+
+        // Desktop mode (lg to xl): icon-only view with perfect centering
+        @media (min-width: 1024px) and (max-width: 1279px) {
+            li a {
+                width: 40px;
+                height: 40px;
+                padding: 0 !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+                position: relative;
+
+                // Hide text completely in icon-only mode
+                span {
+                    display: none !important;
+                }
+
                 svg {
-                    @apply mr-2;
+                    margin: 0 !important;
+                    padding: 0 !important;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
                 }
+
                 &.router-link-exact-active {
-                    @apply border-solid border border-light-300;
+                    border: 2px solid oklch(0.72 0.15 145) !important;
+                    color: oklch(0.72 0.15 145) !important;
+                    background: oklch(0.72 0.15 145 / 0.08) !important;
+                    border-radius: 0.5rem !important;
+                    width: 40px !important;
+                    height: 40px !important;
+                }
+            }
+        }
+
+        // XL and above: full width with text
+        @media (min-width: 1280px) {
+            li a {
+                @apply px-4;
+                height: 40px;
+
+                svg {
+                    @apply mr-2;
                 }
             }
         }
     }
 }
+
 .force-z {
     z-index: 20000;
 }
+
 .mobile-menu {
-    margin-top: -81px; // Tuck under Nav
-    height: calc(100vh + 40px);
+    margin-top: 0;
+    height: 100vh;
+    height: 100dvh; // Dynamic viewport height for mobile
     will-change: transform, opacity, filter;
+    @apply bg-dark-400 fixed inset-0 pt-20 pb-8 w-full z-10;
 
-    @apply bg-dark-400 absolute pt-16 pb-8 w-full z-10;
-    ul {
-        li {
-            @apply mb-4 mx-auto;
-            a {
-                font-size: 20px !important;
-            }
+    ul li {
+        @apply mb-4 mx-auto;
+
+        a {
+            font-size: 20px !important;
         }
     }
 }
+
+.version-badge {
+    @apply flex items-center gap-x-2 px-3 py-2 rounded-lg border;
+    background: oklch(0.2046 0 0);
+    border-color: oklch(0.2809 0 0);
+
+    .version-label {
+        @apply text-xs font-medium;
+        color: oklch(0.65 0 0);
+    }
+
+    .version-number {
+        @apply text-xs font-bold;
+        color: oklch(0.72 0.15 145);
+    }
+}
 </style>
 
 <script setup>
 import { storeToRefs } from "pinia";
 import { ref } from "vue";
-import { EditIcon, ConsoleIcon, TasksIcon, LogoutIcon, MenuIcon, FilterIcon } from "@/components/icons";
+import {
+    EditIcon,
+    ConsoleIcon,
+    TasksIcon,
+    LogoutIcon,
+    MenuIcon,
+    FilterIcon,
+    GroupIcon,
+    MailIcon
+} from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import router from "@/router/index";
 import CountryChooser from "@/components/ui/controls/CountryChooser.vue";