sidebar-navigation-revamp

appknox · Dec 28, 2023 · 3dfedd9 · 3dfedd9
1 parent 178f65b
commit 3dfedd9
Show file tree

Hide file tree

Showing 16 changed files with 542 additions and 99 deletions.
diff --git a/app/components/home-page/organization-dashboard/header/index.hbs b/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'>

diff --git a/app/components/home-page/organization-dashboard/header/index.scss b/app/components/home-page/organization-dashboard/header/index.scss
@@ -1,6 +1,4 @@
 .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);

diff --git a/app/components/home-page/organization-dashboard/header/index.ts b/app/components/home-page/organization-dashboard/header/index.ts
@@ -13,7 +13,9 @@ export interface HomePageOrganizationDashboardHeaderSignature {
   Args: {
     logoutAction: () => void;
     user: UserModel;
+    sidebarWidth: string;
   };
+  Element: HTMLElement;
 }
 
 export default class HomePageOrganizationDashboardHeaderComponent extends Component<HomePageOrganizationDashboardHeaderSignature> {

diff --git a/app/components/home-page/organization-dashboard/index.hbs b/app/components/home-page/organization-dashboard/index.hbs
@@ -1,11 +1,22 @@
-<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}}
+    @sidebarWidth={{this.sidebarWidth}}
   />
 
   <HomePage::OrganizationDashboard::SideNav
+    local-class='dashboard-sidenav'
     @isSecurityEnabled={{@isSecurityEnabled}}
+    @isCollapsed={{this.isCollapsed}}
+    @toggleSidebar={{this.toggleSidebar}}
   />
 
   <main local-class='dashboard-main'>

diff --git a/app/components/home-page/organization-dashboard/index.scss b/app/components/home-page/organization-dashboard/index.scss
@@ -1,17 +1,44 @@
 .organization-dashboard-root {
   width: 100%;
+  display: grid;
+  grid-template-areas:
+                "sidenav topnav"
+                "sidenav main";
+  height: 100vh;
+  grid-template-rows: auto auto;
+
+  &.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;
+  }
+
+  .dashboard-sidenav {
+    grid-area: sidenav;
+  }
+
+  .toggle-button {
+    position: fixed;
+    bottom: 20%;
+    z-index: var(--organization-dashboard-side-nav-zIndex);
+    background-color: white;
+    border-radius: 50%;
 
-    &::before {
-      content: '';
-      display: block;
-      height: 56px;
+    &:hover {
+      background-color: white !important;
     }
   }
 }
diff --git a/app/components/home-page/organization-dashboard/index.ts b/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,26 @@ 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;
+  }
+
+  get sidebarWidth() {
+    return this.isCollapsed ? '250px' : '56px';
+  }
+}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {