Make it a proper left side-bar

dashboard/src/components/Index.vue

@@ -51,6 +51,9 @@ export default {
       } else {
         that.view = '';
       }
+
+      // hack for layout to avoid consuming space if vue view is not active
+      document.getElementById('app').style.height = that.view ? 'auto' : '0';
     }
 
     window.addEventListener('hashchange', onHashChange);

dashboard/src/components/VolumesView.vue

@@ -47,7 +47,7 @@
 
           <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
             <label for="volumePort">{{ $t('volumes.addVolumeDialog.port') }}</label>
-            <input type="number" class="form-control" v-model="volumeDialogData.port" id="volumePort">
+            <NumberInput v-model="volumeDialogData.port" id="volumePort" min="0"/>
           </FormGroup>
 
           <FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
@@ -110,7 +110,7 @@
 
 <script>
 
-import { Button, ButtonGroup, Checkbox, Dialog, Dropdown, FormGroup, InputDialog, PasswordInput, TableView, TextInput } from 'pankow';
+import { Button, ButtonGroup, Checkbox, Dialog, Dropdown, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from 'pankow';
 
 import Card from  './Card.vue';
 
@@ -132,6 +132,7 @@ export default {
     Dropdown,
     FormGroup,
     InputDialog,
+    NumberInput,
     PasswordInput,
     TableView,
     TextInput,

dashboard/src/theme.scss

@@ -56,8 +56,8 @@ $state-danger-border:                       $brand-danger;
 @import "pkg:bootstrap-sass";
 
 html {
-    // --accent-color: $brand-primary;
-    --accent-color: #9141ac;
+    --accent-color: var(--pankow-color-primary);
+    // --accent-color: #9141ac;
     --card-background: #f7f7f8;
     --navbar-background: #f3f4f6;
     --body-background: white;
@@ -332,7 +332,7 @@ html, body {
     // width: 100%;
     // max-width: 720px;
     // margin: 0 auto;
-    margin-right: 40px;
+    // margin-right: 40px;
 
     @media(min-width:768px) {
         // width: 720px;
@@ -380,13 +380,25 @@ html, body {
 }
 
 .nav-sidebar {
-    margin: 0 20px 0 0;
-    min-width: 200px;
+    min-width: 250px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    padding: 10px;
+    padding-top: 22px;
+    background-color: var(--navbar-background);
+    border-right: 1px solid var(--pankow-color-background-hover);
+}
+
+.nav-sidebar-logo img {
+  margin-right: 10px;
+}
+
+.nav-sidebar-logo,
+.nav-sidebar-logo:hover {
+    color: var(--pankow-text-color);
+    text-decoration: none;
     padding-left: 10px;
-    // background-color: var(--navbar-background);
 }
 
 .nav-sidebar-list {
@@ -398,8 +410,7 @@ html, body {
     display: block;
     color: black;
     border-radius: 3px;
-    padding: 10px;
-    margin-right: 10px;
+    padding: 10px 15px;
 }
 
 .nav-sidebar-item i {
@@ -415,9 +426,8 @@ html, body {
 }
 
 .nav-sidebar-item:hover {
-    background-color: var(--accent-color);
+    background-color: var(--pankow-color-background-hover);
     text-decoration: none;
-    color: white;
 }
 
 .nav-sidebar-item.active i ,
@@ -425,6 +435,34 @@ html, body {
     opacity: 1;
 }
 
+.header-toolbar {
+    display: flex;
+    padding: 10px;
+    align-items: center;
+    gap: 15px;
+}
+
+.header-toolbar a {
+    display: block;
+    padding: 6px 15px;
+    border-radius: var(--pankow-border-radius);
+    color: var(--pankow-text-color);
+}
+
+.header-toolbar a:focus,
+.header-toolbar a:active,
+.header-toolbar a:hover {
+    text-decoration: none;
+    background-color: var(--pankow-color-background-hover);
+}
+
+.header-toolbar-avatar {
+    width: 32px;
+    height: 32px;
+    margin-right: 10px;
+    border-radius: var(--pankow-border-radius);
+}
+
 .panel-body {
     padding: 15px 0;
 }