@necrolab/dashboard 0.4.61 → 0.4.208

package/src/components/ui/Navbar.vue

@@ -1,8 +1,9 @@
 <template>
     <div class="navbar" :class="{ 'force-z': menuOpen }">
-        <div :class="['component-container ios-wrapper flex items-center relative', { 'ios-wrapper': landscapeIos }]">
+        <div :class="`component-container ios-wrapper flex items-center relative ${landscapeIos ? 'ios-wrapper' : ''}`">
             <!-- Brand -->
-            <img src="@/assets/img/logo_trans.png" class="h-6 lg:h-8 mr-4 z-30 object-cover" alt="Logo: Necro" />
+            <!-- <h3 class="font-bold text-white mr-4 z-30">Russonoro Labs</h3> -->
+            <img src="@/assets/img/logo_trans.png" class="h-6 lg:h-8 mr-4 z-30 object-cover" alt="Logo: Russonoro" />
             <!-- Navlinks -->
             <ul class="hidden lg:flex">
                 <li>
@@ -15,16 +16,18 @@
                     <router-link to="/console"><ConsoleIcon /><span class="hidden xl:block">Console</span></router-link>
                 </li>
                 <li>
-                    <router-link to="/profiles">
-                        <GroupIcon class="xl:mr-2" />
-                        <span class="hidden xl:block">Profiles</span>
-                    </router-link>
+                    <router-link to="/profiles"
+                        ><img src="/img/groups.svg" class="xl:mr-2" /><span class="hidden xl:block"
+                            >Profiles</span
+                        ></router-link
+                    >
                 </li>
                 <li>
-                    <router-link to="/accounts">
-                        <MailIcon class="xl:mr-2" />
-                        <span class="hidden xl:block">Accounts</span>
-                    </router-link>
+                    <router-link to="/accounts"
+                        ><img src="/img/mail.svg" 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>
@@ -42,6 +45,7 @@
             <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"
@@ -72,16 +76,10 @@
                         <router-link to="/console"><ConsoleIcon />Console</router-link>
                     </li>
                     <li @click="toggleMenu">
-                        <router-link to="/profiles">
-                            <GroupIcon class="mr-2" />
-                            Profiles
-                        </router-link>
+                        <router-link to="/profiles"><img src="/img/groups.svg" class="mr-2" />Profiles</router-link>
                     </li>
                     <li @click="toggleMenu">
-                        <router-link to="/accounts">
-                            <MailIcon class="mr-2" />
-                            Accounts
-                        </router-link>
+                        <router-link to="/accounts"><img src="/img/mail.svg" class="mr-2" />Accounts</router-link>
                     </li>
                     <li @click="toggleMenu">
                         <router-link to="/filter"><FilterIcon />Filter</router-link>
@@ -97,21 +95,12 @@
                         <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 items-center">
-                    <div
-                        class="bg-gradient-to-r from-dark-400 to-dark-500 rounded-full text-sm shadow-lg p-2 px-4 text-white font-medium border border-light-300"
-                    >
-                        Dashboard v{{ dashVersion }}
-                    </div>
-                    <div
-                        class="bg-gradient-to-r from-dark-400 to-dark-500 rounded-full text-sm shadow-lg p-2 px-4 text-white font-medium border border-light-300"
-                    >
-                        Bot v{{ ui.botVersion }}
-                    </div>
-                </div>
+                <span class="bg-dark-500 rounded-full text-sm shadow-lg p-2 px-3 text-light-400 mx-auto mt-6 mb-14"
+                    >v{{ version }}</span
+                >
             </div>
         </transition>
     </div>
@@ -120,152 +109,39 @@
 .navbar {
     @apply border-b py-5 fixed w-full;
     top: 0;
-    left: 0;
-    z-index: 1000;
-    background: rgba(26, 27, 30, 0.95);
+    z-index: 1;
     backdrop-filter: blur(23px);
-    -webkit-backdrop-filter: blur(23px);
-    border-color: #3d3e44;
-
-    // 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: #1a1b1e;
-        backdrop-filter: blur(8px);
-        -webkit-backdrop-filter: blur(8px);
-        z-index: -1;
-    }
-
+    border-color: #323340;
     ul {
         @apply gap-x-4;
-
-        // 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;
-            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-
-            svg {
-                @apply mr-2;
-            }
-
-            &.router-link-exact-active {
-                border-color: #e2e2e5;
-                border-top: 2px solid #e2e2e5;
-                transform: translateY(0px);
-                box-shadow: 0 2px 4px rgba(226, 226, 229, 0.1);
-                margin-top: -2px;
-
-                // Mobile styling
-                @media (max-width: 1023px) {
-                    border: 1px solid #e2e2e5;
-                    transform: translateY(0px);
-                    box-shadow: 0 2px 4px rgba(226, 226, 229, 0.1);
-                    margin-top: 0;
-                    padding: 0.5rem 0.75rem;
-                    border-radius: 0.5rem;
-                }
-            }
-        }
-
-        // 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;
-                }
-
+        li {
+            a {
+                @apply flex  text-white text-sm border-none h-10 items-center px-4 rounded-lg;
                 svg {
-                    margin: 0 !important;
-                    padding: 0 !important;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
+                    @apply mr-2;
                 }
-
                 &.router-link-exact-active {
-                    border: 1px solid #e2e2e5 !important;
-                    border-radius: 0.5rem !important;
-                    width: 40px !important;
-                    height: 40px !important;
-                    background: rgba(226, 226, 229, 0.05) !important;
-                    transform: translateY(-1px) !important;
-                    box-shadow: 0 2px 4px rgba(226, 226, 229, 0.1) !important;
-                    margin-top: 0 !important;
-
-                    svg {
-                        transform: translate(-50%, calc(-50% - 1px));
-                    }
-                }
-            }
-        }
-
-        // XL and above: full width with text
-        @media (min-width: 1280px) {
-            li a {
-                @apply px-4;
-                height: 40px;
-
-                svg {
-                    @apply mr-2;
+                    @apply border-solid border border-light-300;
                 }
             }
         }
     }
 }
-
 .force-z {
     z-index: 20000;
 }
-
 .mobile-menu {
-    margin-top: 0;
-    height: 100vh;
-    height: 100dvh; // Dynamic viewport height for mobile
+    margin-top: -81px; // Tuck under Nav
+    height: calc(100vh + 40px);
     will-change: transform, opacity, filter;
-    @apply bg-dark-400 fixed inset-0 pt-20 pb-8 w-full z-10;
-
-    ul li {
-        @apply mb-4 mx-auto;
 
-        a {
-            font-size: 20px !important;
+    @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;
+            }
         }
     }
 }
@@ -274,16 +150,7 @@
 <script setup>
 import { storeToRefs } from "pinia";
 import { ref } from "vue";
-import {
-    EditIcon,
-    ConsoleIcon,
-    TasksIcon,
-    LogoutIcon,
-    MenuIcon,
-    FilterIcon,
-    GroupIcon,
-    MailIcon
-} from "@/components/icons";
+import { EditIcon, ConsoleIcon, TasksIcon, LogoutIcon, MenuIcon, FilterIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import router from "@/router/index";
 import CountryChooser from "@/components/ui/controls/CountryChooser.vue";
@@ -308,7 +175,7 @@ window.matchMedia("(orientation: portrait)").addEventListener("change", (e) => {
     else landscapeIos.value = false;
 });
 
-const dashVersion = __APP_VERSION__;
+const version = __APP_VERSION__;
 const ui = useUIStore();
 const menuOpen = storeToRefs(ui).menuOpen;
 const toggleMenu = () => {