Merge pull request #935 from hypersign-protocol/side-menu-fix

Fixed the Hover bug and Menu grouping
hypersign-protocol · Feb 15, 2022 · 6e52c8a · 6e52c8a
2 parents c661ccd + cfacbfd
commit 6e52c8a
Showing 1 changed file with 41 additions and 23 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,23 +1,28 @@
 <template>
   <div id="app">
     <NavBar title="HyperFyre" :show="showUserNav" />
-    <div :class="[
+    <!-- <div :class="[
         showNavbar & !showUserNav
           ? isSidebarCollapsed
             ? 'showNavbar collapsed'
             : 'showNavbar notCollapsed'
           : 'hideNavbar',
+      ]"> -->
+    <div :class="[
+        showNavbar & !showUserNav & isSidebarCollapsed 
+            ? 'container-collapsed-not'
+            : 'container-collapsed',
       ]">
       <sidebar-menu class="sidebar-wrapper" @toggle-collapse="onToggleCollapse" :collapsed="isSidebarCollapsed" @item-click="onItemClick" :theme="'white-theme'" width="220px" 
       :menu="isSubscribed? menu : unsubsSubscribedMenu" v-if="showNavbar">
-        <span slot="header" style="background:#363740">
+        <div slot="header" style="background:#363740">
           <div class="ml-1 mt-3 mb-2" style="padding-left:1px; text-align:center; margin-right: 2.25rem !important;" > 
           <a  v-if="!isSidebarCollapsed" href="/admin/dashboard"><img :src="require('./assets/logo.png')" alt="logo" width="175vw" /></a>
           <a v-if="isSidebarCollapsed" href="/admin/dashboard"><img :src="require('./assets/favicon.png')" alt="logo" width="35vw" /></a>
           </div>
           <!-- <p class="header-text">{{ $config.app.name }}</p> -->
           <hr class="rule" />
-        </span>
+        </div>
         <span slot="footer" class="text-center">{{ $config.app.version }}</span>
       </sidebar-menu>
       <div class="content-wrapper">
@@ -62,24 +67,35 @@ export default {
           exactPath: true,
         },
         {
-          href: "/admin/subscription",
-          title: "Subscriptions",
-          icon: "fas fa-receipt",
-          exactPath: true,
-        },
-        {
-          href: "/admin/teams",
-          title: "Teams",
-          icon: "fas fa-user-plus",
-          exactPath: true,
-          
-        },
-        {
-          href: "/admin/login",
-          title: "Logout",
-          icon: "fas fa-sign-out-alt",
-          exactPath: true,
-        },
+          title: "Settings",
+          icon: "fas fa-cog",
+          badge: {
+            text: 'new',
+            class: 'vsm--badge_default'
+            // attributes: {}
+            // element: 'span'
+          },
+          child: [
+            {
+              href: "/admin/teams",
+              title: "Teams",
+              icon: "fas fa-user-plus",
+              exactPath: true,
+            },
+            {
+              href: "/admin/subscription",
+              title: "Subscriptions",
+              icon: "fas fa-receipt",
+              exactPath: true,
+            },
+            {
+              href: "/admin/login",
+              title: "Logout",
+              icon: "fas fa-sign-out-alt",
+              exactPath: true,
+            },
+          ]
+        }
       ],
       unsubsSubscribedMenu: [
         {
@@ -237,10 +253,12 @@ export default {
   margin-bottom: 1%;
 }
 
-.showNavbar .content-wrapper {
+.content-wrapper {
   padding: 50px 20px;
 }
-
+.container-collapsed {
+  padding-left: 200px;
+}
 .showNavbar.notCollapsed>.content-wrapper {
   width: calc(100vw - 200px);
   margin-left: auto;