feat: adjusting styles and header component

bcgov · Dec 20, 2024 · 7543bcd · 7543bcd
1 parent 7425b3f
commit 7543bcd
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/frontend/src/components/BCHeader/index.tsx b/frontend/src/components/BCHeader/index.tsx
@@ -82,19 +82,20 @@ const BCHeader = () => {
 
   return (
     <HeaderContainer
+      isSideNavExpanded={false}
       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}
+                  isCollapsible
                   onClick={onClickSideNavExpand}
                   isActive={isSideNavExpanded}
                 />
@@ -179,9 +180,8 @@ 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' : ''}`}
+                  onClick={onClickSideNavExpand}
                 >
                   <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;
 }