From 9f9f47d055cc74672aa89de2076399746b46d06b Mon Sep 17 00:00:00 2001
From: Nkeiruka <nkeiruka.whenu@canonical.com>
Date: Fri, 14 Jun 2024 02:12:42 +0100
Subject: [PATCH] chore: minor UI change for vertical navigation resizing.

Signed-off-by: Nkeiruka <nkeiruka.whenu@canonical.com>
---
 src/components/Navigation.tsx     | 75 +++++++++++++++----------------
 src/sass/_pattern_navigation.scss | 35 ++++++++-------
 2 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 118d6705a..bcf57edc3 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -88,36 +88,28 @@ const Navigation: FC = () => {
 
   const adjustNavigationScrollForOverflow = () => {
     const navHeader = document.querySelector(".l-navigation .p-panel__header");
-    const navContent = document.querySelector(
-      ".l-navigation .p-panel__content",
-    );
-    const navFooter = document.querySelector(
-      ".l-navigation .sidenav-bottom-ul",
-    );
-    const navToggle = document.querySelector(
-      ".l-navigation .sidenav-toggle-wrapper",
+    const navTop = document.querySelector(".l-navigation .p-panel__content");
+    const navBottom = document.querySelector(
+      ".l-navigation .sidenav-bottom-container",
     );
     const navHeaderHeight = getElementAbsoluteHeight(navHeader as HTMLElement);
-    const navContentHeight = getElementAbsoluteHeight(
-      navContent as HTMLElement,
-    );
-    const navFooterHeight = getElementAbsoluteHeight(navFooter as HTMLElement);
-    const navToggleHeight = getElementAbsoluteHeight(navToggle as HTMLElement);
+    const navTopHeight = getElementAbsoluteHeight(navTop as HTMLElement);
+    const navBottomHeight = getElementAbsoluteHeight(navBottom as HTMLElement);
 
-    let totalNavHeight = navHeaderHeight + navContentHeight + navFooterHeight;
-
-    // when the continer is in scrolling mode, p-panel__content includes the footer height already since it's not absolutely positioned
-    // also need to take into account the toggle height
-    if (scroll) {
-      const footerOffset = navToggleHeight - navFooterHeight;
-      totalNavHeight = totalNavHeight + footerOffset;
-    }
+    const totalNavHeight = navHeaderHeight + navTopHeight + navBottomHeight;
 
     const isNavigationPanelOverflow = totalNavHeight >= window.innerHeight;
 
+    const targetNavTopHeight =
+      window.innerHeight - navHeaderHeight - navBottomHeight;
+
     if (isNavigationPanelOverflow) {
+      const style = `height: ${targetNavTopHeight}px`;
+      navTop?.setAttribute("style", style);
       setScroll(true);
     } else {
+      const style = `height: auto`;
+      navTop?.setAttribute("style", style);
       setScroll(false);
     }
   };
@@ -179,7 +171,7 @@ const Navigation: FC = () => {
               </div>
             </div>
             <div className="p-panel__content">
-              <div className="p-side-navigation--icons is-dark">
+              <div className="p-side-navigation--icons is-dark sidenav-top-container">
                 <ul className="p-side-navigation__list sidenav-top-ul">
                   {isAuthenticated && (
                     <>
@@ -440,6 +432,8 @@ const Navigation: FC = () => {
                     </>
                   )}
                 </ul>
+              </div>
+              <div className="p-side-navigation--icons is-dark sidenav-bottom-container">
                 <ul
                   className={classnames(
                     "p-side-navigation__list sidenav-bottom-ul",
@@ -448,6 +442,7 @@ const Navigation: FC = () => {
                     },
                   )}
                 >
+                  <hr className="is-dark navigation-hr" />
                   {isAuthenticated && (
                     <li className="p-side-navigation__item">
                       <div
@@ -535,26 +530,26 @@ const Navigation: FC = () => {
                     </li>
                   )}
                 </ul>
+                <div
+                  className={classnames("sidenav-toggle-wrapper", {
+                    "authenticated-nav": isAuthenticated,
+                  })}
+                >
+                  <Button
+                    appearance="base"
+                    aria-label={`${
+                      menuCollapsed ? "expand" : "collapse"
+                    } main navigation`}
+                    hasIcon
+                    dense
+                    className="sidenav-toggle is-dark u-no-margin l-navigation-collapse-toggle u-hide--small"
+                    onClick={hardToggleMenu}
+                  >
+                    <Icon light name="sidebar-toggle" />
+                  </Button>
+                </div>
               </div>
             </div>
-            <div
-              className={classnames("sidenav-toggle-wrapper", {
-                "authenticated-nav": isAuthenticated,
-              })}
-            >
-              <Button
-                appearance="base"
-                aria-label={`${
-                  menuCollapsed ? "expand" : "collapse"
-                } main navigation`}
-                hasIcon
-                dense
-                className="sidenav-toggle is-dark u-no-margin l-navigation-collapse-toggle u-hide--small"
-                onClick={hardToggleMenu}
-              >
-                <Icon light name="sidebar-toggle" />
-              </Button>
-            </div>
           </div>
         </div>
       </nav>
diff --git a/src/sass/_pattern_navigation.scss b/src/sass/_pattern_navigation.scss
index fd6d5093f..56a8015c0 100644
--- a/src/sass/_pattern_navigation.scss
+++ b/src/sass/_pattern_navigation.scss
@@ -55,7 +55,6 @@
   background: $colors--dark-theme--background-default;
   bottom: 0;
   padding: $spv--small $sph--x-large $spv--large $sph--large;
-  position: absolute;
   text-align: right;
   width: 100%;
 
@@ -91,20 +90,6 @@
   padding-bottom: 0;
 }
 
-.l-navigation.is-scroll {
-  .sidenav-bottom-ul.authenticated-nav {
-    bottom: initial;
-    margin-bottom: 0;
-    position: initial;
-  }
-
-  .sidenav-toggle-wrapper.authenticated-nav {
-    bottom: initial;
-    position: initial;
-    width: initial;
-  }
-}
-
 .l-navigation .p-panel__header {
   z-index: 1001;
 }
@@ -118,12 +103,28 @@
   display: none;
 }
 
+.sidenav-top-ul {
+  height: 100%;
+  margin-bottom: 0;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+.sidenav-top-container {
+  height: 100%;
+}
+
 .sidenav-bottom-ul {
-  bottom: $spv--x-large;
-  position: absolute;
+  height: fit-content;
+  margin-bottom: 0;
   width: 15rem;
 }
 
+.sidenav-bottom-container {
+  bottom: 0;
+  position: absolute;
+}
+
 .p-side-navigation__item--title {
   white-space: nowrap;
 }