From 267317f378af56b1ffd32d15e401dfc45c91828b 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     | 5 ++++-
 src/sass/_pattern_navigation.scss | 9 +++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 118d6705a8..a01a20f65b 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -179,7 +179,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 +440,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 +450,7 @@ const Navigation: FC = () => {
                     },
                   )}
                 >
+                  <hr className="is-dark navigation-hr" />
                   {isAuthenticated && (
                     <li className="p-side-navigation__item">
                       <div
diff --git a/src/sass/_pattern_navigation.scss b/src/sass/_pattern_navigation.scss
index fd6d5093fe..ed29b84876 100644
--- a/src/sass/_pattern_navigation.scss
+++ b/src/sass/_pattern_navigation.scss
@@ -120,10 +120,19 @@
 
 .sidenav-bottom-ul {
   bottom: $spv--x-large;
+  height: fit-content;
   position: absolute;
   width: 15rem;
 }
 
+.sidenav-top-container {
+  height: 50vh;
+  overflow: scroll;
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  overflow-x: hidden;
+  scrollbar-width: none; /* Firefox */
+}
+
 .p-side-navigation__item--title {
   white-space: nowrap;
 }