first draft of compact sidebar

zero.Web.UI/App/navigation.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="app-nav">
+  <div class="app-nav theme-dark" :class="{'is-compact': compact }">
 
     <h1 class="app-nav-headline">
-      <img src="/Assets/zero-2-light.png" v-localize:alt="'@zero.name'" />
+      <img src="/Assets/zero-2.png" v-localize:alt="'@zero.name'" />
     </h1>
 
     <ui-dropdown v-if="applications.length > 0" class="app-nav-switch">
@@ -19,13 +19,13 @@
       <template v-for="section in sections">
         <router-link :to="section.url" class="app-nav-item" :alias="section.alias" :class="{ 'has-children': hasChildren(section) }">
           <ui-icon :icon="section.icon" class="app-nav-item-icon" />
-          {{section.name | localize}}
+          <span class="app-nav-item-text" v-localize="section.name"></span>
           <ui-icon v-if="hasChildren(section)" icon="chevron-down" class="app-nav-item-arrow" />
         </router-link>
         <transition name="app-nav-children">
           <div class="app-nav-children" v-if="hasChildren(section) && $route.path.indexOf('/' + section.alias) === 0">
             <router-link v-for="child in section.children" v-bind:key="child.alias" :to="child.url" class="app-nav-child">
-              {{child.name | localize}}
+              <span class="app-nav-child-text" v-localize="child.name"></span>
             </router-link>
           </div>
         </transition>
@@ -49,6 +49,7 @@
         </template>
         <ui-dropdown-button label="Edit" icon="edit-2" @click="editUser" />
         <ui-dropdown-button label="Change password" icon="lock" @click="changePassword" />
+        <ui-dropdown-button label="Toggle sidebar" icon="fth-minimize-2" @click="compact=!compact" />
         <ui-dropdown-button label="Logout" icon="log-out" @click="logout" />
       </ui-dropdown>
     </footer>
@@ -71,7 +72,8 @@
       applications: zero.applications,
       sections: zero.sections,
       user: null,
-      userAvatar: null
+      userAvatar: null,
+      compact: true
     }),
 
 

zero.Web.UI/Sass/Canvas/_navigation.scss

@@ -170,7 +170,7 @@ a.app-nav-child
 {
   display: grid;
   width: 100%;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto minmax(auto, 1fr) auto;
   gap: 16px;
   color: var(--color-text-dim);
   align-items: center;
@@ -201,4 +201,91 @@ a.app-nav-child
       color: var(--color-text);
     }
   }
+}
+
+
+/* COMPACT MODE */
+
+.app-nav.is-compact
+{
+  width: 82px;
+
+  .app-nav-headline
+  {
+    width: 100%;
+    overflow: hidden;
+    padding-left: 0;
+    padding-right: 0;
+
+    img
+    {
+      margin-left: 29px;
+      clip-path: circle(23.78% at 13px 14px);
+      min-width: 118px;
+    }
+  }
+
+  .app-nav-switch
+  {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    width: 100%;
+    overflow: hidden;
+    padding: 16px 0 0;
+  }
+
+  a.app-nav-item, button.app-nav-item
+  {
+    display: flex;
+
+    &:hover + .app-nav-children
+    {
+      display: block;
+    }
+  }
+
+  .app-nav-item-text, .app-nav-item-arrow
+  {
+    display: none;
+  }
+
+  .app-nav-children
+  {
+    display: none;
+    width: 290px;
+    position: absolute;
+    background: var(--color-bg-shade-1);
+    z-index: 3;
+    border-radius: var(--radius);
+    padding: 15px 0 20px;
+
+    &:hover
+    {
+      display: block;
+    }
+  }
+
+  a.app-nav-child
+  {
+    padding: 0 var(--padding);
+  }
+
+  .app-nav-account
+  {
+    padding: 0;
+    margin-bottom: var(--padding);
+    margin-left: 25px;
+  }
+
+  .app-nav-account-button
+  {
+    display: block;
+    width: 32px;
+
+    .-text, .-arrow
+    {
+      display: none;
+    }
+  }
 }

zero.Web.UI/Sass/Settings/_theme-dark.scss

@@ -2,8 +2,8 @@
 .theme-dark
 {
   // accent colors
-  $color-primary: #3c9a92; //#18a471
-  $color-primary-fg: #fff;
+  $color-primary: #fff; //#18a471
+  $color-primary-fg: #191e25;
   $color-primary-low: #{rgba(#2c3036, 0.2)};
   $color-secondary: #24b4a6;
   $color-secondary-fg: #fff;