feat: 1629 collapse navigation (#1796)

bcgov · Jan 14, 2025 · 6215d10 · 6215d10
1 parent 5c9c246
commit 6215d10
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/frontend/src/components/BCHeader/constants.ts b/frontend/src/components/BCHeader/constants.ts
@@ -121,6 +121,7 @@ export const componentTexts = {
   headerTitle: 'SPAR',
   completeTitle: ' Seed Planning and Registry System',
   openMenu: 'Open menu',
+  closeMenu: 'Close menu',
   sideMenuAriaLabel: 'Side menu',
   searchAriaLabel: 'Search',
   notifications: {

diff --git a/frontend/src/components/BCHeader/index.tsx b/frontend/src/components/BCHeader/index.tsx
@@ -82,19 +82,24 @@ const BCHeader = () => {
 
   return (
     <HeaderContainer
+      isSideNavExpanded
       render={({ isSideNavExpanded, onClickSideNavExpand }: HearderContainerProps) => (
         <Header
           aria-label={componentTexts.completeTitle}
-          className="spar-header"
+          className={`spar-header ${!isSideNavExpanded && 'spar-header-expanded'}`}
           data-testid="header"
-          onClick={isSideNavExpanded ? onClickSideNavExpand : null}
         >
           <SkipToContent />
           {
             !(location.pathname.endsWith('/403') || location.pathname.endsWith('/404'))
               ? (
                 <HeaderMenuButton
-                  aria-label={componentTexts.openMenu}
+                  aria-label={
+                    isSideNavExpanded
+                      ? componentTexts.closeMenu
+                      : componentTexts.openMenu
+                  }
+                  isCollapsible
                   onClick={onClickSideNavExpand}
                   isActive={isSideNavExpanded}
                 />
@@ -179,9 +184,7 @@ const BCHeader = () => {
                   isChildOfHeader
                   expanded={isSideNavExpanded}
                   aria-label={componentTexts.sideMenuAriaLabel}
-                  inert={undefined}
-                  className="spar-side-nav"
-                  onClick={isSideNavExpanded ? onClickSideNavExpand : null}
+                  className={`spar-side-nav ${!isSideNavExpanded && 'spar-side-nav-expanded'}`}
                 >
                   <div className="side-nav-top">
                     {

diff --git a/frontend/src/components/BCHeader/styles.scss b/frontend/src/components/BCHeader/styles.scss
@@ -52,6 +52,10 @@
     justify-content: space-between;
     overflow-y: auto;
 
+    &.spar-side-nav-expanded {
+      inline-size: 0;
+    }
+
     .side-nav-top {
       padding-top: 1rem;
     }

diff --git a/frontend/src/layout/PrivateLayout/styles.scss b/frontend/src/layout/PrivateLayout/styles.scss
@@ -2,7 +2,7 @@
 
 .main-container {
   padding-top: 5.625rem;
-  padding-left: 16rem;
+  transition: padding-left 0.11s cubic-bezier(0.2, 0, 1, 0.9), transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
 
   .dependency-notification {
     max-width: none;
@@ -11,6 +11,11 @@
   }
 }
 
+header.spar-header:not(.spar-header-expanded) + div.main-container {
+  padding-left: 16rem;
+  transition: padding-left 0.11s cubic-bezier(0.2, 0, 1, 0.9), transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
+}
+
 .page-content .#{vars.$bcgov-prefix}--grid {
   max-width: none;
 }
@@ -26,7 +31,8 @@
 }
 
 @media only screen and (max-width: 1055px) {
-  .main-container {
+  .main-container,
+  header.spar-header:not(.spar-header-expanded) + div.main-container {
     padding-top: 5rem;
     padding-left: 0;
   }