sidebar navigation revamp

app/components/home-page/organization-dashboard/header/index.hbs

@@ -2,8 +2,8 @@
 <AkAppbar
   local-class='navbar-root'
   @justifyContent='space-between'
-  @position='fixed'
   @elevation={{true}}
+  ...attributes
   data-test-organizationDashboardHeader
 >
   <AkStack @alignItems='center' @spacing='1.5'>

app/components/home-page/organization-dashboard/header/index.scss

@@ -1,9 +1,8 @@
 .navbar-root {
-  width: calc(100% - 250px);
-  margin-left: 250px;
   padding: 0.65em 1em;
   background-color: var(--organization-dashboard-header-background-color);
   color: var(--organization-dashboard-header-text-color);
+  max-height: 4em;
 
   .navbar-btn {
     color: var(--organization-dashboard-header-text-color);

app/components/home-page/organization-dashboard/header/index.ts

@@ -14,6 +14,7 @@ export interface HomePageOrganizationDashboardHeaderSignature {
     logoutAction: () => void;
     user: UserModel;
   };
+  Element: HTMLElement;
 }
 
 export default class HomePageOrganizationDashboardHeaderComponent extends Component<HomePageOrganizationDashboardHeaderSignature> {

app/components/home-page/organization-dashboard/index.hbs

@@ -1,11 +1,21 @@
-<div local-class='organization-dashboard-root'>
+<div
+  local-class='organization-dashboard-root {{if
+    this.isCollapsed
+    "collapsed"
+    "expanded"
+  }}'
+>
   <HomePage::OrganizationDashboard::Header
+    local-class='dashboard-header'
     @user={{@user}}
     @logoutAction={{@logoutAction}}
   />
 
   <HomePage::OrganizationDashboard::SideNav
+    local-class='dashboard-sidenav'
     @isSecurityEnabled={{@isSecurityEnabled}}
+    @isCollapsed={{this.isCollapsed}}
+    @toggleSidebar={{this.toggleSidebar}}
   />
 
   <main local-class='dashboard-main'>

app/components/home-page/organization-dashboard/index.scss

@@ -1,17 +1,37 @@
 .organization-dashboard-root {
   width: 100%;
+  display: grid;
+  grid-template-areas:
+    "sidenav topnav"
+    "sidenav main";
+  height: 100vh;
+  grid-template-rows: 4em auto;
+
+  &.expanded, &.collapsed {
+    transition: grid-template-columns 0.2s ease-in-out;
+  }
+
+  &.expanded {
+    grid-template-columns: 56px auto;
+  }
+
+  &.collapsed {
+    grid-template-columns: 250px auto;
+  }
 
   .dashboard-main {
-    width: calc(100% - 250px);
-    min-height: 100vh;
-    margin-left: 250px;
+    grid-area: main;
+    max-height: 100vh;
     padding: 0.5em;
     box-sizing: border-box;
+    overflow-y: auto;
+  }
+
+  .dashboard-header {
+    grid-area: topnav;
+  }
 
-    &::before {
-      content: '';
-      display: block;
-      height: 56px;
-    }
+  .dashboard-sidenav {
+    grid-area: sidenav;
   }
 }

app/components/home-page/organization-dashboard/index.ts

@@ -1,6 +1,9 @@
+import { action } from '@ember/object';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
 import UserModel from 'irene/models/user';
+import { translateCrispChatbox } from 'irene/utils/chat';
 
 export interface HomePageOrganizationDashboardSignature {
   Args: {
@@ -14,7 +17,22 @@ export interface HomePageOrganizationDashboardSignature {
   };
 }
 
-export default class HomePageOrganizationDashboardComponent extends Component<HomePageOrganizationDashboardSignature> {}
+export default class HomePageOrganizationDashboardComponent extends Component<HomePageOrganizationDashboardSignature> {
+  @tracked isCollapsed = false;
+
+  constructor(
+    owner: unknown,
+    args: HomePageOrganizationDashboardSignature['Args']
+  ) {
+    super(owner, args);
+    translateCrispChatbox();
+  }
+
+  @action
+  toggleSidebar() {
+    this.isCollapsed = !this.isCollapsed;
+  }
+}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {