Initial basic side-bar open/close logic

dashboard/index.html

@@ -133,7 +133,7 @@
 
     <div style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
 
-      <div class="nav-sidebar">
+      <div class="nav-sidebar" ng-class="{'closed': sideBarClosed }">
         <a href="#/" class="nav-sidebar-logo">
           <img ng-src="{{ client.avatar }}" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
         </a>
@@ -153,6 +153,7 @@
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/volumes')}" ng-show="user.isAtLeastAdmin" href="#/volumes" ng-click="closeNavbar()"><i class="fa fa-hdd fa-fw"></i> {{ 'volumes.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/system')}" ng-show="user.isAtLeastAdmin" href="#/system" ng-click="closeNavbar()"><i class="fa fa-chart-area fa-fw"></i> {{ 'system.title' | tr }}</a>
         </div>
+        <button type="button" ng-click="onSidebarToggle()" class="btn nav-sidebar-toggle-button"><i class="fa-solid fa-angle-left" ng-class="{'fa-angle-right': sideBarClosed, 'fa-angle-left': !sideBarClosed }"></i></button>
       </div>
 
       <div style="flex-grow: 1; display: flex; flex-direction: column; padding: 10px 40px 0 40px; overflow: hidden; height: 100%;">

dashboard/public/js/index.js

@@ -670,11 +670,16 @@ app.controller('MainController', ['$scope', '$route', '$timeout', '$location', '
     $scope.notificationCount = 0;
     $scope.hideNavBarActions = $location.path() === '/logs';
     $scope.backgroundImageUrl = '';
+    $scope.sideBarClosed = false;
 
     $scope.closeNavbar = function () {
         $('.navbar-collapse').collapse('hide');
     };
 
+    $scope.onSidebarToggle = function () {
+        $scope.sideBarClosed = !$scope.sideBarClosed;
+    };
+
     $scope.reboot = {
         busy: false,
 

dashboard/src/theme.scss

@@ -379,8 +379,18 @@ html, body {
     color: black;
 }
 
+.nav-sidebar-toggle-button {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    width: 20px;
+}
+
 .nav-sidebar {
-    min-width: 250px;
+    position: relative;
+    transition: all 200ms ease;
+    width: 250px;
+    white-space: nowrap !important;
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -390,6 +400,10 @@ html, body {
     border-right: 1px solid var(--pankow-color-background-hover);
 }
 
+.nav-sidebar.closed {
+    width: 0;
+}
+
 .nav-sidebar-logo img {
   margin-right: 10px;
 }