WIP(ui-top-nav-bar): refactor

Author: joyenjoyer

packages/__docs__/src/App/index.tsx

@@ -39,6 +39,7 @@ import {
 } from '@instructure/ui-icons'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
+import { Img } from '@instructure/ui-img'
 
 type AppProps = {
   navigate: (path: string, options?: { replace: boolean }) => void
@@ -63,6 +64,8 @@ type Menu = {
     onClick?: () => void
   }
   title: string
+  renderBeforeMobileMenuItems?: JSX.Element
+  renderAfterMobileMenuItems?: JSX.Element
 }
 
 type MenuCollection = {
@@ -75,7 +78,12 @@ class App extends Component<AppProps, AppState> {
     super(props)
 
     this.state = {
-      menuStack: ['default']
+      menuStack: [
+        'default',
+        ...(window.location.pathname.substring(1)
+          ? [window.location.pathname.substring(1)]
+          : [])
+      ]
     }
   }
 
@@ -142,9 +150,8 @@ class App extends Component<AppProps, AppState> {
             label: 'Dashboard',
             renderBeforeLabel: <IconDashboardLine />,
             onClick: () => {
-              // Navigate and reload logic
               this.props.navigate('/dashboard', { replace: true })
-              window.location.reload() // Forces a reload
+              window.location.reload()
             }
           },
           {
@@ -153,12 +160,19 @@ class App extends Component<AppProps, AppState> {
           }
         ],
         backNavigation: {
-          href: '#',
-          label: 'Back'
+          href: undefined,
+          label: '',
+          onClick: undefined
         },
-        title: 'Main Menu'
+        title: ''
       },
       account: {
+        renderBeforeMobileMenuItems: (
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <Img src="https://sbcf.fr/wp-content/uploads/2018/03/sbcf-default-avatar.png" />
+          </div>
+        ),
+        renderAfterMobileMenuItems: <h3>Additional account info</h3>,
         items: [
           {
             label: 'AccountInfo1'
@@ -182,6 +196,18 @@ class App extends Component<AppProps, AppState> {
           }
         },
         title: 'Courses'
+      },
+      dashboard: {
+        title: 'Dashboard',
+        items: [{ label: 'Courses1' }, { label: 'Courses2' }],
+        backNavigation: {
+          label: 'Back',
+          onClick: () => {
+            this.popMenu()
+            this.props.navigate('/', { replace: true })
+            window.location.reload()
+          }
+        }
       }
     }
 
@@ -219,15 +245,18 @@ class App extends Component<AppProps, AppState> {
               onClick: () => alert('Alerts clicked')
             }
           ]}
-          mobileMenuBackNavigation={menu[this.getCurrentMenu()].backNavigation}
+          mobileMenuBackNavigation={menu[this.getCurrentMenu()]?.backNavigation}
           mobileMenu={menu[this.getCurrentMenu()].items}
-          beforeMobileMenuItems={<div>Before Mobile Menu</div>}
-          afterMobileMenuItems={<div>After Mobile Menu</div>}
+          beforeMobileMenuItems={
+            menu[this.getCurrentMenu()]?.renderBeforeMobileMenuItems
+          }
+          afterMobileMenuItems={
+            menu[this.getCurrentMenu()]?.renderAfterMobileMenuItems
+          }
         />
         <Routes>
           <Route path="/" element={<h1>This is home</h1>} />
           <Route path="/dashboard" element={<h1>This is dashboard</h1>} />
-          {/*<Route path="/profile" element={<Profile />} />*/}
         </Routes>
       </div>
     )

packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx

@@ -88,26 +88,42 @@ const CanvasTopNav = ({
         ))}
       </MobileTopNav.End>
       <MobileTopNav.Menu>
-        <div style={{ marginTop: 16 }}>
-          <Breadcrumb label={mobileMenuBackNavigation.label}>
-            <BreadcrumbLink
-              href={mobileMenuBackNavigation.href}
-              onClick={mobileMenuBackNavigation.onClick}
+        {mobileMenuBackNavigation.label && (
+          <div style={{ marginTop: 16 }}>
+            <InstUISettingsProvider
+              theme={{
+                componentOverrides: {
+                  Link: {
+                    color: styles.breadcrumbOverride.color
+                  }
+                }
+              }}
             >
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px'
-                }}
-              >
-                <IconArrowOpenStartLine />
-                {mobileMenuBackNavigation.label}
-              </div>
-            </BreadcrumbLink>
-          </Breadcrumb>
-        </div>
-        {beforeMobileMenuItems && beforeMobileMenuItems}
+              <Breadcrumb label={mobileMenuBackNavigation.label}>
+                <BreadcrumbLink
+                  href={mobileMenuBackNavigation.href}
+                  onClick={mobileMenuBackNavigation.onClick}
+                >
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px'
+                    }}
+                  >
+                    <IconArrowOpenStartLine />
+                    {mobileMenuBackNavigation.label}
+                  </div>
+                </BreadcrumbLink>
+              </Breadcrumb>
+            </InstUISettingsProvider>
+          </div>
+        )}
+        {beforeMobileMenuItems && (
+          <div style={{ marginTop: '24px', marginBottom: '16px' }}>
+            {beforeMobileMenuItems}
+          </div>
+        )}
         <MobileTopNav.ItemList title={mobileMenuTitle}>
           {mobileMenu.map((item: any, index: any) => (
             <MobileTopNav.Item
@@ -120,7 +136,11 @@ const CanvasTopNav = ({
             </MobileTopNav.Item>
           ))}
         </MobileTopNav.ItemList>
-        {afterMobileMenuItems && afterMobileMenuItems}
+        {afterMobileMenuItems && (
+          <div style={{ marginTop: '24px', marginBottom: '16px' }}>
+            {afterMobileMenuItems}
+          </div>
+        )}
       </MobileTopNav.Menu>
     </MobileTopNav>
   ) : (