WIP(ui-top-nav-bar): add smallviewportlayout

instructure · Nov 6, 2023 · 8f94c27 · 8f94c27
1 parent ce4b7f8
commit 8f94c27
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 10 deletions.
diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarBreadcrumb/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarBreadcrumb/index.tsx
@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import React, { Component } from 'react'
+import React, { Component, ReactElement } from 'react'
 import {
   TopNavBarBreadcrumbProps,
   TopNavBarBreadcrumbState,
@@ -35,9 +35,13 @@ import { withStyle, jsx } from '@instructure/emotion'
 import generateStyle from '../TopNavBarBreadcrumb/styles'
 import generateComponentTheme from '../TopNavBarBreadcrumb/theme'
 import { testable } from '@instructure/ui-testable'
-import { IconHamburgerLine } from '@instructure/ui-icons'
+import {
+  IconArrowOpenStartLine,
+  IconHamburgerLine
+} from '@instructure/ui-icons'
 import TopNavBarContext from '../TopNavBarContext'
 import { error } from '@instructure/console'
+import { Link } from '@instructure/ui-link'
 
 /**
 ---
@@ -89,7 +93,7 @@ class TopNavBarBreadcrumb extends Component<
           renderIcon={<IconHamburgerLine />}
           onClick={onClick}
         >
-          Icon variant
+          Hamburger menu
         </TopNavBar.Item>
       </div>
     )
@@ -104,13 +108,33 @@ class TopNavBarBreadcrumb extends Component<
         `[TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.`
       )
     }
+
+    const breadcrumbElement = React.Children.toArray(
+      children
+    )[0] as ReactElement
+    const breadCrumbLinks = breadcrumbElement.props.children
+    const lastButOneLink = React.Children.toArray(breadCrumbLinks)[
+      React.Children.count(breadCrumbLinks) - 2
+    ] as ReactElement
+
     return (
-      this.context.inverseColor && (
+      this.context.inverseColor &&
+      (this.context.layout === 'desktop' ? (
         <div ref={this.handleRef} css={styles?.topNavBarBreadcrumb}>
           <div css={styles?.iconContainer}>{this.renderMenu()}</div>
           <div css={styles?.breadcrumbContainer}>{children}</div>
         </div>
-      )
+      ) : (
+        <div ref={this.handleRef} css={styles?.topNavBarBreadcrumb}>
+          <Link
+            href={lastButOneLink.props.href}
+            isWithinText={false}
+            renderIcon={IconArrowOpenStartLine}
+          >
+            {lastButOneLink.props.children}
+          </Link>
+        </div>
+      ))
     )
   }
 }

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.tsx
@@ -221,6 +221,14 @@ class TopNavBarSmallViewportLayout extends Component<
     return (this.dropdownMenuContent || []).length > 0
   }
 
+  get hasBreadcrumbBlock() {
+    const { renderBreadcrumb } = this.props
+    return (
+      !!renderBreadcrumb &&
+      React.Children.count(renderBreadcrumb.props.children) > 0
+    )
+  }
+
   get isInPlaceDialogOpen() {
     return this.props.renderInPlaceDialogConfig?.open
   }
@@ -570,7 +578,13 @@ class TopNavBarSmallViewportLayout extends Component<
   }
 
   render() {
-    const { trayMountNode, navLabel, renderActionItems, styles } = this.props
+    const {
+      trayMountNode,
+      navLabel,
+      renderActionItems,
+      renderBreadcrumb,
+      styles
+    } = this.props
 
     return (
       <nav
@@ -580,20 +594,24 @@ class TopNavBarSmallViewportLayout extends Component<
       >
         <Global styles={styles?.globalStyles} />
 
-        {!this.isInPlaceDialogOpen && (
+        {this.hasBreadcrumbBlock && (
+          <div css={styles?.navbar}>{renderBreadcrumb}</div>
+        )}
+
+        {!this.hasBreadcrumbBlock && !this.isInPlaceDialogOpen && (
           <div css={styles?.navbar}>
             {this.renderMenuTrigger()}
             {this.hasActionItemsBlock(renderActionItems) && renderActionItems}
           </div>
         )}
 
-        {this.renderInPlaceDialog()}
+        {!this.hasBreadcrumbBlock && this.renderInPlaceDialog()}
 
-        {!trayMountNode && (
+        {!this.hasBreadcrumbBlock && !trayMountNode && (
           <div css={styles?.trayContainer} id={this._trayContainerId} />
         )}
 
-        {this.renderDropdownMenuTray()}
+        {!this.hasBreadcrumbBlock && this.renderDropdownMenuTray()}
       </nav>
     )
   }