fix(sidenav): add a scrollbar when content overflows

Teradata · Jun 14, 2024 · f45d84e · f45d84e
1 parent 19b8726
commit f45d84e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/libs/react-components/src/lib/components/Header/index.tsx b/libs/react-components/src/lib/components/Header/index.tsx
@@ -261,18 +261,16 @@ const Header: React.FC<HeaderProps> = ({
                   secondaryMenu?.menuElement ? { paddingTop: '6.5rem' } : {}
                 }
               >
-                <div>
-                  <div className={styles.sidenavHeader}>
-                    <h3>{secondaryMenu?.title}</h3>
-                    <img
-                      src={closeIcon}
-                      onClick={handleDocsIconClick}
-                      alt="Docs Menu"
-                    />
-                  </div>
-                  <div className={styles.sidenavContent}>
-                    {secondaryMenu?.menuElement}
-                  </div>
+                <div className={styles.sidenavHeader}>
+                  <h3>{secondaryMenu?.title}</h3>
+                  <img
+                    src={closeIcon}
+                    onClick={handleDocsIconClick}
+                    alt="Docs Menu"
+                  />
+                </div>
+                <div className={styles.sidenavContent}>
+                  {secondaryMenu?.menuElement}
                 </div>
               </Sidenav>
             </aside>

diff --git a/libs/react-components/src/lib/components/Header/styles.module.scss b/libs/react-components/src/lib/components/Header/styles.module.scss
@@ -277,6 +277,8 @@ body {
 
 .sidenavContent {
   padding: 1rem;
+  overflow: auto;
+  height: 100%;
 }
 
 @media screen and (min-width: 768px) and (max-width: 1024px) {