Improve topbar layout

assets/css/scss/layout/_topbar.scss

@@ -1,100 +1,65 @@
-.app-topbar.p-megamenu,
+.app-topbar {
-.app-topbar.p-menubar {
+  @apply bg-white border-b border-solid border-gray-25 fixed left-0 p-4 top-0 w-full text-gray-50 z-10
-  @apply bg-white border-b border-solid border-gray-200 text-gray-700 fixed flex py-4 px-6 left-0 top-0 w-full;
+    md:text-gray-90;
 }
 
-.app-topbar__user-submenu,
 .app-topbar.p-megamenu,
 .app-topbar .p-menubar {
-  .p-menuitem-link {
+  @apply flex;
-    @apply rounded-none text-gray-700 py-3 px-4 transition-none select-none;
-
-    .p-menuitem-text {
-      @apply text-gray-700;
-    }
-
-    .p-menuitem-icon {
-      @apply text-gray-500 mr-2;
-
-      &:empty {
-        @apply mr-0;
-      }
 }
 
-    .p-submenu-icon {
+.app-topbar.p-megamenu {
-      @apply text-gray-500;
+  @apply md:px-6;
 }
 
-    &:not(.p-disabled) {
+.app-topbar .p-menubar {
-      &:hover {
+  @apply container mx-auto;
-        @apply bg-gray-100;
-
-        .p-menuitem-text {
-          @apply text-gray-900;
 }
 
-        .p-menuitem-icon {
+.app-topbar__user-submenu,
-          @apply text-gray-500;
+.app-topbar.p-megamenu,
-        }
+.app-topbar .p-menubar {
+  .p-menuitem-link {
+    @apply rounded-none py-3 px-4 transition-none select-none;
 
-        .p-submenu-icon {
+    &:focus {
-          @apply text-gray-500;
+      @apply outline-none outline-offset-0;
-        }
-      }
     }
 
+    &:hover,
     &:focus {
-      @apply outline-none outline-offset-0;
+      @apply text-primary;
-      box-shadow: inset 0 0 0 0.15rem #6366F1;
     }
   }
 }
 
 .app-topbar .p-megamenu-root-list,
 .app-topbar .p-menubar-root-list {
-  @apply grow justify-end;
+  @apply bg-white grow justify-end;
-
-  > .p-menuitem {
-    > .p-menuitem-link {
-      @apply rounded-md text-gray-700 py-3 px-4 transition-none select-none;
-
-      .p-menuitem-text {
-        @apply text-gray-700;
-      }
 
   .p-menuitem-icon {
-        @apply text-gray-500 mr-2;
+    @apply mr-2;
 
     &:empty {
-          @apply mr-0;
+      @apply mx-0;
     }
   }
 
+  > .p-menuitem {
+    > .p-menuitem-link {
+
       .p-submenu-icon {
-        @apply text-gray-500 ml-2;
+        @apply mr-2 -order-1;
       }
 
       &:focus {
         @apply outline-none outline-offset-0;
-        box-shadow: inset 0 0 0 0.15rem #6366F1;
-      }
       }
     }
 
-  > .p-menuitem.p-menuitem-active {
+    &.p-menuitem-active {
       > .p-menuitem-link {
-      @apply bg-gray-100;
+        @apply text-primary;
-
-      .p-menuitem-text {
-        @apply text-gray-700;
-      }
-
-      .p-menuitem-icon {
-        @apply text-gray-500;
-      }
-
-      .p-submenu-icon {
-        @apply text-gray-500;
       }
     }
   }
@@ -106,103 +71,70 @@
   }
 
   .p-megamenu-panel {
-    @apply bg-white border-none shadow-md text-gray-700;
+    @apply border-none shadow-lg text-gray-90;
   }
 
   .p-megamenu-submenu-header {
-    @apply text-gray-700 bg-white rounded-t-md font-semibold m-0 py-3 px-4;
+    @apply rounded-t-md font-semibold m-0 py-3 px-4;
   }
 
   .p-megamenu-submenu {
     @apply py-1 px-0 w-52;
 
     .p-menu-separator {
-      @apply border-t border-solid border-gray-100 my-1 mx-0;
+      @apply border-t border-solid my-1 mx-0;
-    }
-  }
-
-  .p-menuitem.p-menuitem-active {
-    > .p-menuitem-link {
-      @apply bg-gray-100;
-
-      .p-menuitem-text {
-        @apply text-gray-700;
-      }
-
-      .p-menuitem-icon {
-        @apply text-gray-500;
-      }
-
-      .p-submenu-icon {
-        @apply text-gray-500;
-      }
     }
   }
 }
 
 .app-topbar__user-submenu {
-  @apply bg-white border border-solid border-gray-200 rounded-md text-gray-700 py-1 px-0 w-52;
+  @apply bg-white border-none rounded-lg shadow-lg py-3 px-0 w-52 max-h-60 overflow-y-auto;
 
   .p-submenu-header {
-    @apply bg-white rounded-t-none text-gray-700 font-semibold m-0 py-3 px-4;
+    @apply rounded-t-none font-semibold m-0 py-3 px-4;
   }
 
   .p-menu-separator {
-    @apply border-t border-solid border-gray-100 my-1 mx-0;
+    @apply border-t border-solid my-1 mx-0;
   }
 
   &.p-menu-overlay {
-    @apply bg-white border-none shadow-md;
+    @apply border-none shadow-lg;
+  }
+
+  .p-menuitem {
+    .p-menuitem-link {
+      &:hover,
+      &:focus {
+        @apply bg-support-1;
+      }
+    }
   }
 }
 
 .app-topbar .p-menubar {
   .p-submenu-list {
-    @apply bg-white border-none shadow-md py-1 px-0 w-52;
+    @apply bg-white border-none rounded-lg shadow-lg py-3 px-0 w-52 max-h-60 overflow-y-auto right-0;
-
-    .p-menu-separator {
-      @apply border-t border-solid border-gray-100 my-1 mx-0;
-    }
 
     .p-submenu-icon {
       @applt text-sm;
     }
-  }
 
-  .p-menuitem.p-menuitem-active {
+    >.p-menuitem:hover,
+    >.p-menuitem:focus {
       > .p-menuitem-link {
-      @apply bg-gray-100;
+        @apply bg-support-1;
-
-      .p-menuitem-text {
-        @apply text-gray-700;
-      }
-
-      .p-menuitem-icon {
-        @apply text-gray-500;
-      }
-
-      .p-submenu-icon {
-        @apply text-gray-500;
       }
     }
   }
 }
 
 @media (max-width: 639px) {
-  .app-topbar.p-megamenu,
-  .app-topbar.p-menubar {
-    @apply px-4;
-  }
-
   .app-topbar .p-menubar {
     @apply justify-between;
 
     .p-menubar-button {
-      @apply rounded-full text-gray-500 flex h-8 transition-none w-8;
+      @apply rounded-full flex h-8 transition-none w-8;
-
-      &:hover {
-        @apply text-gray-500;
-      }
 
       &:focus {
         @apply outline-none outline-offset-0;
@@ -210,84 +142,67 @@
     }
 
     .p-menubar-root-list {
-      @apply bg-white border-none shadow-md hidden py-1 px-0 absolute w-full;
+      @apply hidden flex-col absolute left-0 w-full pt-8;
-
+      height: calc(100vh - 4.5rem - 1px);
-      .p-menu-separator {
+      top: calc(100% + 1px);
-        @apply border border-solid border-gray-100 my-1 mx-0;
-      }
-
-      .p-submenu-icon {
-        @apply text-sm;
-      }
 
       > .p-menuitem {
-        @apply static w-full;
+        @apply w-full px-6 pb-2;
 
         > .p-menuitem-link {
-          > .p-submenu-icon {
+          @apply py-3 px-9;
-            @apply ml-auto transition-transform duration-200;
-          }
-        }
-      }
 
-      > .p-menuitem.p-menuitem-active {
+          &:hover,
-        > .p-menuitem-link {
+          &:focus {
-          > .p-submenu-icon {
+            @apply border-l-4 border-primary border-solid pl-8;
-            @apply rotate-180;
           }
         }
+
+        &:nth-last-child(2) {
+          @apply grow;
         }
 
-      .p-submenu-list {
+        &:last-child {
-        @apply border-none shadow-none static w-full;
+          @apply border-t border-solid border-gray-25 py-5;
 
           .p-submenu-icon {
-          @apply rotate-90 transition-transform duration-200;
+            &.pi.pi-angle-down {
-        }
+              &::before {
-
+                content: "\e94f";
-        .p-menuitem-active {
-          > .p-menuitem-link {
-            > .p-submenu-icon {
-              @apply rotate-90;
-            }
-          }
               }
             }
-
-      .p-menuitem {
-        @apply static w-full;
           }
 
-      ul li {
+          &.p-menuitem-active {
-        a {
+            @apply text-gray-90;
-          @apply pl-8;
-        }
 
-        ul li {
+            > .p-menuitem-link {
-          a {
+              @apply bg-primary text-white rounded-md;
-            @apply pl-12;
             }
-
-          ul li {
-            a {
-              @apply pl-16;
           }
 
-            ul li {
+          > .p-menuitem-link {
-              a {
+            @apply px-4;
-                @apply pl-20;
-              }
 
-              ul li a {
+            &:hover,
-                @apply pl-24;
+            &:focus {
+              @apply border-none;
             }
           }
         }
       }
+
+      .p-submenu-list {
+        @apply bottom-full -mb-4 right-auto;
+        width: calc(100% - 3rem);
       }
     }
 
     &.p-menubar-mobile-active {
+      + .app-main {
+        @apply max-h-screen overflow-hidden;
+      }
+
       .p-menubar-button {
         .pi.pi-bars {
           &::before {
@@ -297,8 +212,7 @@
       }
 
       .p-menubar-root-list {
-        @apply flex flex-col left-0 top-full;
+        @apply flex;
-        z-index: 1;
       }
     }
   }

assets/vue/components/layout/Topbar.vue

@@ -12,11 +12,12 @@ import {useStore} from "vuex";
 
 import TopbarLoggedIn from "./TopbarLoggedIn.vue";
 import TopbarNotLoggedIn from "./TopbarNotLoggedIn.vue";
+import {computed} from "vue";
 
 const store = useStore();
 
 const platformSettings = window.config;
 
-const isAuthenticated = store.getters['security/isAuthenticated'];
+const isAuthenticated = computed(() => store.getters['security/isAuthenticated']);
-const currentUser = store.getters['security/getUser'];
+const currentUser = computed(() => store.getters['security/getUser']);
 </script>

assets/vue/components/layout/TopbarNotLoggedIn.vue

@@ -1,6 +1,6 @@
 <template>
+  <div class="app-topbar">
     <Menubar
-    class="app-topbar"
       :model="menuItems"
     >
       <template #start>
@@ -10,6 +10,7 @@
         >
       </template>
     </Menubar>
+  </div>
 </template>
 
 <script setup>

assets/vue/quasar-user-options.js

@@ -1,4 +1,4 @@
-import './styles/quasar.sass'
+//import './styles/quasar.sass'
 import '@quasar/extras/material-icons/material-icons.css'
 
 import {Dialog, Notify} from 'quasar'