chore: minor UI change for vertical navigation resizing.

Signed-off-by: Nkeiruka <[email protected]>
canonical · Jun 17, 2024 · 267317f · 267317f
1 parent be48794
commit 267317f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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;
 }