feat: compact navbar to enable more space for other contents

webui-src/app/main.js

@@ -26,30 +26,62 @@ const navIcon = {
 };
 
 const navbar = () => {
+  let toggleNav = false;
   return {
-    view: (vnode) => m(
-      'nav.tab-menu',
-      [
-        m('.nav-logo', [
-          m('img', {
-            src: '../data/retroshare.svg',
-            alt: 'retroshare_icon',
+    view: (vnode) =>
+      m('nav.menu', {}, [
+        m(
+          '.menu__logo',
+          {
+            style: { width: toggleNav ? '25px' : '130px' },
+          },
+          [
+            m('img', {
+              src: '../data/retroshare.svg',
+              alt: 'retroshare_icon',
+            }),
+            m(
+              'h4',
+              {
+                style: { display: toggleNav ? 'none' : 'block' },
+              },
+              'Retroshare'
+            ),
+          ]
+        ),
+        m('.menu__box', [
+          Object.keys(vnode.attrs.links).map((linkName, i) => {
+            const active = m.route.get().split('/')[1] === linkName;
+            return m(
+              m.route.Link,
+              {
+                href: vnode.attrs.links[linkName],
+                class: 'item' + (active ? ' item-selected' : ''),
+                style: { width: toggleNav ? '2.25rem' : '10rem' },
+              },
+              [
+                navIcon[linkName],
+                m(
+                  'p[style="margin: 0; align-self: end"]',
+                  {
+                    style: { display: toggleNav ? 'none' : 'block' },
+                  },
+                  linkName
+                ),
+              ]
+            );
           }),
-          m('h4', 'Retroshare'),
-        ]),
-        Object.keys(vnode.attrs.links).map((linkName, i) => {
-          const active = m.route.get().split('/')[1] === linkName;
-          return m(
-            m.route.Link,
+          m(
+            'button.toggle-nav',
             {
-              href: vnode.attrs.links[linkName],
-              class: (active ? 'selected-tab-item' : '') + ' tab-menu-item',
+              onclick: () => (toggleNav = !toggleNav),
             },
-            [navIcon[linkName], m('p[style="margin: 0; align-self: end"]', linkName)]
-          );
-        })
-      ]
-    ),
+            m('i.fas.fa-angle-double-right', {
+              style: { rotate: toggleNav ? '0deg' : '180deg' },
+            })
+          ),
+        ]),
+      ]),
   };
 };
 
@@ -135,7 +167,6 @@ m.route(document.getElementById('main'), '/', {
   },
   '/boards/:tab/:mGroupId/:mMsgId': {
     render: (v) => m(Layout, m(boards, v.attrs)),
-
   },
   '/config/:tab': {
     render: (v) => m(Layout, m(config, v.attrs)),

webui-src/app/scss/components/_navbar.scss

@@ -1,22 +1,9 @@
+@use '../abstracts/' as *;
+
 /* Navbar */
-.nav-logo {
-  width: 130px;
-  padding: 1.2rem 0;
-  display: flex;
-  gap: 0.3rem;
-  align-items: center;
-}
-.nav-logo img {
-  width: 1.6rem;
-}
-.nav-logo h4 {
-  color: white;
-  align-self: end;
-}
-nav.tab-menu {
-  border-right: 4px solid #3ba4d7;
-  background-color: #14141B;
-  box-shadow: 0 5px 5px #aaa;
+.menu {
+  background-color: #14141b;
+  box-shadow: 0 5px 5px #222;
   float: left;
   display: flex;
   flex-direction: column;
@@ -24,14 +11,72 @@ nav.tab-menu {
   height: 100%;
   padding: 8px 6px;
   margin-right: 0rem;
+
+  &__logo {
+    width: 130px;
+    padding: 1.2rem 0;
+    display: flex;
+    gap: 0.3rem;
+    align-items: center;
+    overflow: hidden;
+
+    img {
+      width: 1.6rem;
+    }
+
+    h4 {
+      color: white;
+      align-self: end;
+    }
+  }
+
+  &__box {
+    padding-top: 2rem;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .item {
+      width: 10rem;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+
+      &:hover {
+        background-color: #ffffff15;
+      }
+    }
+
+    .item.item-selected {
+      color: #99deff;
+      background-color: #89befa20;
+      font-weight: medium;
+    }
+
+    button.toggle-nav {
+      display: none;
+      font-size: 14px;
+      position: absolute;
+      padding: 0;
+      top: 0;
+      right: -20px;
+      background: lighten($primary-color, 15%);
+      width: 24px;
+      height: 24px;
+      aspect-ratio: 1;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      box-shadow: none;
+    }
+  }
+  // only show toggle button when sidebar is hovered
+  &:hover button.toggle-nav {
+    display: flex;
+  }
 }
-.tab-menu-item {
-  width: 10rem;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-}
-a.tab-menu-item {
+a.item {
   margin: 4px;
   padding: 10px;
   text-align: center;
@@ -45,15 +90,7 @@ a.tab-menu-item {
   display: inline-flex;
   flex-direction: row;
 }
-.tab-menu-item:hover {
-  background-color: #FFFFFF15;
-}
 
-.tab-menu-item.selected-tab-item {
-  color: #99DEFF;
-  background-color: #89BEFA20;
-  font-weight: medium;
-}
 .sidebar {
   height: 30%;
   width: 200px;