feat: dynamic sized header item in navbar

TheBigSasha · May 8, 2024 · 3e513cc · 3e513cc
1 parent df5d009
commit 3e513cc
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 3 deletions.
diff --git a/src/lib/components/organisms/navmenu/NavMenu.tsx b/src/lib/components/organisms/navmenu/NavMenu.tsx
@@ -91,8 +91,8 @@ export const ResponsiveNavMenu: FC<NeoNavMenuProps> = ({
     scrollCollapse === 'never'
       ? styles.scroll_collapse_never
       : scrollCollapse === 'card'
-        ? styles.nav_menu_cardify_collapsible
-        : styles.nav_menu_collapsible
+      ? styles.nav_menu_cardify_collapsible
+      : styles.nav_menu_collapsible
 
   const classNameCollapsed = scrollCollapsed ? '' : styles.expanded
   return (
@@ -177,3 +177,4 @@ export const NAV_MENU_TOGGLE_ID = styles.tbsui_ssr_navmenu_toggle
 export const NAVMENU_HEADER_ITEM_CLASS_COLLAPSED = styles.tbsui_ssr_header_item_collapsed
 export const NAVMENU_HEADER_ITEM_CLASS_EXPANDED = styles.tbsui_ssr_header_item_expanded
 export const NAVMENU_EXPANDED_CLASS = styles.expanded //Enables toggling expanded state without React
+export const NAVMENU_HEADER_SHRINK_ITEM_CLASS = styles.tbsui_ssr_header_shrink_item
diff --git a/src/lib/components/organisms/navmenu/navmenu.module.scss b/src/lib/components/organisms/navmenu/navmenu.module.scss
@@ -475,6 +475,17 @@
   overflow: hidden;
 }
 
+.tbsui_ssr_header_shrink_item {
+  transition: all 0.3s ease-out;
+  opacity: 1;
+  height: auto;
+  font-size: var(--font-sm);
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  overflow: hidden;
+}
+
 .expanded {
   #tbsui_ssr_navmenu_toggle:not(:checked) {
     /* height: max-content; */
@@ -491,6 +502,8 @@
       /* margin-top: 0; */
     }
 
+
+
     & ~ .nav_menu_cardify_collapsible {
       width: var(--navmenu-expanded-width);
       padding-left: var(--navmenu-expanded-padding);
@@ -521,6 +534,18 @@
       font-size: 0;
       height: 0;
     }
+
+    & ~ * .tbsui_ssr_header_shrink_item {
+      transition: all 0.3s ease-out;
+      opacity: 1;
+      height: auto;
+      font-size: var(--font-xl);
+      padding: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+      overflow: hidden;
+    }
+
   }
 }
 

diff --git a/src/lib/components/organisms/navmenu/responsivenavmenu.stories.tsx b/src/lib/components/organisms/navmenu/responsivenavmenu.stories.tsx
@@ -4,6 +4,7 @@ import {
   ResponsiveNavMenu,
   NAVMENU_HEADER_ITEM_CLASS_EXPANDED,
   NAVMENU_HEADER_ITEM_CLASS_COLLAPSED,
+  NAVMENU_HEADER_SHRINK_ITEM_CLASS,
 } from '.'
 import { Meta } from '@storybook/react'
 import { StoryFn } from '@storybook/react'
@@ -46,6 +47,31 @@ Primary.args = {
 
 export const NoCategories = Template.bind({})
 NoCategories.args = {
+  links: [
+    { link: <a href="#">Dynamic item goes</a> },
+    { link: <a href="#">From size xl</a> },
+    { link: <a href="#">To size sm</a> },
+    { link: <a href="#">When the header </a> },
+    { link: <a href="#">Switches between</a> },
+    { link: <a href="#">Small & Large modes</a> },
+  ],
+  scrollCollapsed: true,
+  fillScreen: 'never',
+  scrollCollapse: 'card',
+  headerItem: (
+    <>
+      <p style={{ margin: 'auto', color: 'red' }}>
+        <p className={NAVMENU_HEADER_SHRINK_ITEM_CLASS}>Dynamic</p>
+        Header
+        <div />
+      </p>
+    </>
+  ),
+  headerItemPosition: 'left',
+}
+
+export const ScrollCollapsed = Template.bind({})
+ScrollCollapsed.args = {
   links: [
     { link: <a href="#">Link 1</a> },
     { link: <a href="#">Link 2</a> },
@@ -54,9 +80,11 @@ NoCategories.args = {
     { link: <a href="#">Link 5</a> },
     { link: <a href="#">Link 6</a> },
   ],
+  scrollCollapsed: false,
+  scrollCollapse: 'card',
   headerItem: (
     <>
-      <p style={{ margin: 'auto', fontSize: '100%' }}>
+      <p style={{ margin: 'auto', fontSize: '100%', color: 'red' }}>
         <p className={NAVMENU_HEADER_ITEM_CLASS_EXPANDED}>Expanded</p>
         Header
         <div />

diff --git a/src/lib/styles/variables/default-variables.scss b/src/lib/styles/variables/default-variables.scss
@@ -42,6 +42,7 @@
   --navmenu-card-width: min(90vw, 1200px);
   --navmenu-expanded-width: calc(100vw - 6rem);
   --navmenu-expanded-padding: 3rem;
+  --font-xl: 2.5rem;
 }
 
 @media (prefers-color-scheme: dark) {