Side nav component

src/assets/styles/common-select.scss

@@ -10,7 +10,7 @@
         }
 
         &.mat-selected:not(.mat-option-multiple) {
-            background-color: rgba(var(--iqser-primary), 0.2);
+            background-color: rgba(var(--iqser-primary-rgb), 0.2);
             color: var(--iqser-accent);
         }
     }

src/assets/styles/common-side-nav.scss

@@ -0,0 +1,36 @@
+@use 'common-mixins' as mixins;
+
+iqser-side-nav {
+    display: block;
+    min-width: 200px;
+    max-width: 200px;
+    background-color: var(--iqser-grey-2);
+    border-right: 1px solid var(--iqser-separator);
+    box-sizing: border-box;
+    padding: 8px;
+    height: 100%;
+    overflow: auto;
+    @include mixins.no-scroll-bar;
+
+    .all-caps-label {
+        padding: 16px;
+    }
+
+    .item {
+        margin-bottom: 4px;
+        border-radius: 20px;
+        padding: 9px 16px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        font-weight: 500;
+
+        &:not(.active):hover {
+            background-color: rgba(var(--iqser-primary-rgb), 0.2);
+        }
+
+        &.active {
+            background-color: var(--iqser-primary);
+            color: var(--iqser-white);
+        }
+    }
+}

src/assets/styles/common-styles.scss

@@ -26,3 +26,4 @@
 @use 'common-toggle-button';
 @use 'common-tooltips';
 @use 'common-file-drop';
+@use 'common-side-nav';

src/assets/styles/common-tabs.scss

@@ -15,13 +15,13 @@
     }
 
     &.active {
-        background-color: rgba(var(--iqser-primary), 0.1);
+        background-color: rgba(var(--iqser-primary-rgb), 0.1);
         font-weight: 600;
         color: var(--iqser-primary);
     }
 
     &.disabled {
-        color: rgba(var(--iqser-accent), 0.3);
+        color: rgba(var(--iqser-accent-rgb), 0.3);
         cursor: not-allowed;
     }
 }

src/lib/common-ui.module.ts

@@ -20,6 +20,7 @@ import { LogPipe } from './utils/pipes/log.pipe';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
+import { SideNavComponent } from './misc/side-nav/side-nav.component';
 
 const matModules = [MatIconModule, MatProgressSpinnerModule, MatButtonModule, MatDialogModule];
 const modules = [
@@ -39,7 +40,8 @@ const components = [
     FullPageErrorComponent,
     LogoComponent,
     HiddenActionComponent,
-    ConfirmationDialogComponent
+    ConfirmationDialogComponent,
+    SideNavComponent
 ];
 const pipes = [SortByPipe, HumanizePipe];
 

src/lib/misc/index.ts

@@ -1,5 +1,6 @@
-export * from './status-bar/status-bar.component';
-export * from './status-bar/status-bar-config.model';
-export * from './logo/logo.component';
 export * from './confirmation-dialog/confirmation-dialog.component';
 export * from './hidden-action/hidden-action.component';
+export * from './logo/logo.component';
+export * from './side-nav/side-nav.component';
+export * from './status-bar/status-bar.component';
+export * from './status-bar/status-bar-config.model';

src/lib/misc/side-nav/side-nav.component.html

@@ -0,0 +1,3 @@
+<div class="all-caps-label">{{ title }}</div>
+
+<ng-content></ng-content>

src/lib/misc/side-nav/side-nav.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Required } from '../../utils';
+
+@Component({
+    selector: 'iqser-side-nav',
+    templateUrl: './side-nav.component.html',
+    styleUrls: ['./side-nav.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SideNavComponent {
+    @Input() @Required() title!: string;
+}