feat(header): add action buttons to the mobile nav

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

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/libs/react-components/src/lib/components/DropdownMenu/styles.module.scss b/libs/react-components/src/lib/components/DropdownMenu/styles.module.scss
@@ -29,10 +29,9 @@
 
 .dropdownMenu {
   margin-top: 5px;
-  padding: 0;
   list-style: none;
   background-color: transparent;
-  padding: 0 2.5rem;
+  padding: 0 1.5rem;
 }
 
 .dropdownMenuItem {

diff --git a/libs/react-components/src/lib/components/Header/Header.stories.tsx b/libs/react-components/src/lib/components/Header/Header.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import Header from './index';
 import Icon from '../Icon';
+import Button from '../Button';
 
 const meta = {
   title: 'Components/Header',
@@ -86,7 +87,10 @@ const meta = {
         ),
         type: 'search',
       },
-      { actionElement: <Icon className="fa fa-home" />, type: 'button' },
+      {
+        actionElement: <Button icon="fa fa-home" label="Start free demo" />,
+        type: 'button',
+      },
     ],
   },
 } satisfies Meta<typeof Header>;

diff --git a/libs/react-components/src/lib/components/Header/index.tsx b/libs/react-components/src/lib/components/Header/index.tsx
@@ -290,6 +290,17 @@ const Header: React.FC<HeaderProps> = ({
                 </div>
 
                 <footer>
+                  <ul
+                    className={`${styles.headerNavActions} ${styles.headerNavElement} ${styles.headerNavMobileActions}`}
+                  >
+                    {headerActions &&
+                      headerActions.map(
+                        (action, index) =>
+                          action.type === 'button' && (
+                            <li key={index}>{action.actionElement}</li>
+                          )
+                      )}
+                  </ul>
                   <div className={styles.headerNavMobileFooter}>
                     <ul>
                       <li>

diff --git a/libs/react-components/src/lib/components/Header/styles.module.scss b/libs/react-components/src/lib/components/Header/styles.module.scss
@@ -220,7 +220,7 @@ body {
 
 .headerNavMobileFooter ul {
   margin: 1em 0;
-  padding: 0 2rem;
+  padding: 0 1.5rem;
   display: flex;
   align-items: center;
 }
@@ -232,6 +232,18 @@ body {
   font-weight: 700;
 }
 
+.headerNavMobileDropdownMenu {
+  overflow: auto;
+}
+
+.headerNavMobileActions {
+  padding: 0 1.5rem;
+
+  li {
+    margin: 1.5rem 0;
+  }
+}
+
 .headerNavMobileSecondaryMenu {
   padding-top: 1.5rem;
   padding-left: 2px;