feat(sidenav): subheading as ReactNode, fix mobile sidenav items padding #421 (#512)

* feat(sidenav): subheading as ReactNode, fix mobile sidenav items padding #421

* fix(sidenav): parents are links collapse button positioning inside menu item #421

Author: airikej

src/tedi/components/layout/sidenav/components/sidenav-dropdown/sidenav-dropdown.tsx

@@ -26,7 +26,7 @@ type SideNavDropdownProps<C extends React.ElementType = 'a'> = {
 };
 
 type Group<C extends React.ElementType> = {
-  subHeading?: string;
+  subHeading?: React.ReactNode;
   subItems: SideNavItemProps<C>[];
 };
 

src/tedi/components/layout/sidenav/components/sidenav-item/sidenav-item.tsx

@@ -23,7 +23,7 @@ export type SideNavItemProps<C extends React.ElementType = 'a'> = LinkProps<C> &
    * Grouped submenu items (preferred for headings)
    */
   subItemGroups?: {
-    subHeading?: string;
+    subHeading?: React.ReactNode;
     subItems: SideNavItemProps<C>[];
   }[];
   /**
@@ -73,6 +73,7 @@ export const SideNavItem = <C extends React.ElementType = 'a'>(
 
   const groupsToRender = subItemGroups ?? (subItems ? [{ subItems }] : null);
   const hasChildren = !!groupsToRender;
+  const hasTreeIndicator = level > 1 && hasChildren;
 
   const SideNavItemBEM = cn(
     styles['tedi-sidenav__item'],
@@ -81,6 +82,7 @@ export const SideNavItem = <C extends React.ElementType = 'a'>(
       [styles[`tedi-sidenav__item--level-${level}`]]: level > 1,
       [styles['tedi-sidenav__item--current']]: isActive,
       [styles['tedi-sidenav__item--has-children']]: hasChildren,
+      [styles['tedi-sidenav__item--with-tree']]: hasTreeIndicator,
     },
     className
   );

…di/components/layout/sidenav/examples.ts …i/components/layout/sidenav/examples.tsxsrc/tedi/components/layout/sidenav/examples.ts renamed to src/tedi/components/layout/sidenav/examples.tsx src/tedi/components/layout/sidenav/examples.ts renamed to src/tedi/components/layout/sidenav/examples.tsx

@@ -1,4 +1,6 @@
 /* istanbul ignore file */
+import { Text } from '../../base/typography/text/text';
+import { InfoButton } from '../../buttons/info-button/info-button';
 import { SideNavItemProps } from './components/sidenav-item/sidenav-item';
 
 export const exampleNavItems: SideNavItemProps[] = [
@@ -248,3 +250,63 @@ export const exampleThirdLevelMenuItemsLinks: SideNavItemProps[] = [
   { href: '#', children: 'Inventory Management', icon: 'inventory' },
   { href: '#', children: 'Billing & Finance', icon: 'payments' },
 ];
+
+export const exampleThirdLevelMenuItemsLinksWithSubTitles: SideNavItemProps[] = [
+  { href: '#', children: 'Dashboard', icon: 'dashboard' },
+  { href: '#', children: 'Patient Records', icon: 'people' },
+  {
+    children: 'Clinical Management',
+    icon: 'medical_services',
+    subItemGroups: [
+      {
+        subHeading: (
+          <Text>
+            Minu tervise ajalugu <InfoButton color="inverted">Lorem ipsum</InfoButton>
+          </Text>
+        ),
+        subItems: [
+          { href: '#', children: 'Active Treatments' },
+          { href: '#', children: 'Treatment History' },
+          { href: '#', children: 'Treatment Plans' },
+          { href: '#', children: 'Clinical Protocols' },
+        ],
+      },
+    ],
+    subItems: [
+      { href: '#', children: 'Vital Signs' },
+      { href: '#', children: 'Assessments' },
+      {
+        href: '#',
+        children: 'Treatments',
+        subItems: [
+          { href: '#', children: 'Active Treatments' },
+          { href: '#', children: 'Treatment History' },
+          { href: '#', children: 'Treatment Plans' },
+          { href: '#', children: 'Clinical Protocols' },
+        ],
+      },
+      {
+        href: '#',
+        children: 'Documentation',
+        subItems: [
+          { href: '#', children: 'Clinical Notes' },
+          { href: '#', children: 'Medical Forms' },
+          { href: '#', children: 'Consent Forms' },
+          { href: '#', children: 'Reports' },
+        ],
+      },
+    ],
+    isDefaultOpen: true,
+  },
+  {
+    href: '#',
+    children: 'Administration',
+    icon: 'admin_panel_settings',
+    subItems: [
+      { href: '#', children: 'Staff Management' },
+      { href: '#', children: 'Scheduling' },
+    ],
+  },
+  { href: '#', children: 'Inventory Management', icon: 'inventory' },
+  { href: '#', children: 'Billing & Finance', icon: 'payments' },
+];

src/tedi/components/layout/sidenav/sidenav.module.scss

@@ -197,7 +197,8 @@
   }
 }
 
-.tedi-sidenav__item.tedi-sidenav__sub-item .tedi-sidenav__link {
+.tedi-sidenav__item--with-tree .tedi-sidenav__item.tedi-sidenav__sub-item .tedi-sidenav__link,
+.tedi-sidenav__item--level-2 .tedi-sidenav__link {
   min-height: var(--navigation-vertical-item-min-height-medium);
   padding-top: var(--navigation-vertical-item-padding-y);
   padding-bottom: var(--navigation-vertical-item-padding-y);
@@ -208,11 +209,21 @@
   );
 }
 
+.tedi-sidenav__item:not(.tedi-sidenav__item--with-tree) .tedi-sidenav__sub-item.tedi-sidenav__item .tedi-sidenav__link,
+.tedi-sidenav__item--level-2 .tedi-sidenav__link,
+.tedi-sidenav__item--with-tree.tedi-sidenav__item--level-2 .tedi-sidenav__link.tedi-sidenav__link--has-children-link {
+  @include breakpoints.media-breakpoint-down(md) {
+    padding-left: var(--navigation-vertical-item-padding-right);
+  }
+}
+
 .tedi-sidenav__item .tedi-sidenav__link--has-children-link {
   padding-right: calc(var(--navigation-vertical-item-padding-right) + var(--button-xs-icon-size));
 
   @include breakpoints.media-breakpoint-down(md) {
+    z-index: 1;
     margin-left: calc(var(--navigation-vertical-item-padding-right) + var(--button-xs-icon-size));
+    background-color: var(--navigation-vertical-item-background-default);
   }
 }
 
@@ -227,7 +238,7 @@
   + .tedi-sidenav__link-collapse-wrapper
   [data-name='collapse-trigger'] {
   position: absolute;
-  top: calc(var(--navigation-vertical-item-min-height-medium) / 3);
+  top: calc((var(--navigation-vertical-item-min-height-large) - var(--button-xs-icon-size)) / 2);
   right: var(--navigation-vertical-item-padding-right);
   display: flex;
   align-items: center;
@@ -359,7 +370,7 @@ button.tedi-sidenav__link.tedi-sidenav__back-button {
 .tedi-sidenav__subheading {
   padding: var(--layout-grid-gutters-02) var(--navigation-vertical-item-padding-left-level-1)
     var(--layout-grid-gutters-04) var(--navigation-vertical-item-padding-right);
-  font-size: var(--size-00);
+  font-size: var(--body-extra-small-bold-size);
   color: var(--navigation-vertical-group-title-text);
   text-transform: uppercase;
 

src/tedi/components/layout/sidenav/sidenav.stories.tsx

@@ -11,6 +11,7 @@ import {
   exampleNavItems,
   exampleThirdLevelMenuItems,
   exampleThirdLevelMenuItemsLinks,
+  exampleThirdLevelMenuItemsLinksWithSubTitles,
 } from './examples';
 import { SideNav } from './sidenav';
 
@@ -278,3 +279,10 @@ export const SmallSideNavItems: Story = {
     sideNavItemSize: 'small',
   },
 };
+
+export const SubTitles: Story = {
+  render: Template,
+  args: {
+    navItems: exampleThirdLevelMenuItemsLinksWithSubTitles,
+  },
+};