From 10e186e063cda6c0e54fc923def5314803a7361d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20S=C3=A1ros?= <balazs.saros@instructure.com>
Date: Wed, 14 Aug 2024 10:34:33 +0200
Subject: [PATCH 1/4] WIP(ui-top-nav-bar): wip

---
 packages/__docs__/components.js               |   2 +-
 packages/__docs__/src/App/index.tsx           | 183 +++++++++++++++---
 packages/__docs__/src/index.html              |   3 +
 .../ui-top-nav-bar/src/MobileTopNav/README.md | 107 ++++++++++
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx | 136 +++++++++++++
 .../ui-top-nav-bar/src/MobileTopNav/props.ts  |  40 ++++
 packages/ui-top-nav-bar/src/index.ts          |   2 +
 7 files changed, 442 insertions(+), 31 deletions(-)
 create mode 100644 packages/ui-top-nav-bar/src/MobileTopNav/README.md
 create mode 100644 packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
 create mode 100644 packages/ui-top-nav-bar/src/MobileTopNav/props.ts

diff --git a/packages/__docs__/components.js b/packages/__docs__/components.js
index 38149739e6..33e1c9a07f 100644
--- a/packages/__docs__/components.js
+++ b/packages/__docs__/components.js
@@ -128,6 +128,6 @@ export { ToggleBlockquote } from './src/ToggleBlockquote'
 export { InstUISettingsProvider } from '@instructure/emotion'
 export { Drilldown } from '@instructure/ui-drilldown'
 export { SourceCodeEditor } from '@instructure/ui-source-code-editor'
-export { TopNavBar } from '@instructure/ui-top-nav-bar'
+export { TopNavBar, MobileTopNav } from '@instructure/ui-top-nav-bar'
 export { TruncateList } from '@instructure/ui-truncate-list'
 export { canvas, canvasHighContrast, instructure } from '@instructure/ui-themes'
diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 55b8c3160b..f623f2fd16 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -42,7 +42,7 @@ import { Flex } from '@instructure/ui-flex'
 import { Text } from '@instructure/ui-text'
 import { View } from '@instructure/ui-view'
 import { AccessibleContent } from '@instructure/ui-a11y-content'
-import { Mask } from '@instructure/ui-overlays'
+import { MobileTopNav } from '@instructure/ui-top-nav-bar'
 import { IconButton } from '@instructure/ui-buttons'
 import { Tray } from '@instructure/ui-tray'
 import { Link } from '@instructure/ui-link'
@@ -731,6 +731,29 @@ class App extends Component<AppProps, AppState> {
     if (!docsData || !iconsData) {
       return <LoadingScreen />
     }
+
+    const brandSvg = (
+      // eslint-disable-next-line jsx-a11y/anchor-is-valid
+      <a
+        style={{
+          width: '28px',
+          height: '28px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+        href="#"
+      >
+        <svg
+          viewBox="0 0 1920 1920"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="#fff"
+        >
+          <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
+        </svg>
+      </a>
+    )
+
     return (
       <AppContext.Provider
         value={{
@@ -739,36 +762,136 @@ class App extends Component<AppProps, AppState> {
           themes: docsData.themes
         }}
       >
-        <div css={this.props.styles?.app}>
-          <Global styles={this.props.styles?.globalStyles} />
-          {showMenu && layout === 'small' && (
-            <Mask onClick={this.handleMenuClose} />
-          )}
-          {this.renderNavigation()}
-          <div
-            css={this.props.styles?.content}
-            aria-label={key || docsData.library.name}
-            role="main"
-            ref={this.handleContentRef}
-          >
-            {!showMenu && (
-              <div css={this.props.styles?.hamburger}>
-                <InstUISettingsProvider>
-                  <IconButton
-                    onClick={this.handleMenuOpen}
-                    elementRef={this.handleMenuTriggerRef}
-                    renderIcon={IconHamburgerSolid}
-                    screenReaderLabel="Open Navigation"
-                    shape="circle"
-                  />
-                </InstUISettingsProvider>
-              </div>
-            )}
-            {this.renderContent(key)}
-            {this.renderFooter()}
-          </div>
+        <div
+          style={{
+            position: 'relative',
+            width: '100%',
+            maxWidth: '100%',
+            boxSizing: 'border-box'
+          }}
+        >
+          <MobileTopNav brand={brandSvg} />
+          <p>
+            1 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            2 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            3 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            4 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            5 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            6 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            7 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            8 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            9 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            10 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            11 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            12 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            13 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            14 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            15 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            16 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            17 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            18 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            19 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            20 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
         </div>
-        {this.renderLegacyDocWarning()}
       </AppContext.Provider>
     )
   }
diff --git a/packages/__docs__/src/index.html b/packages/__docs__/src/index.html
index 583325669c..96a9a8d9a2 100644
--- a/packages/__docs__/src/index.html
+++ b/packages/__docs__/src/index.html
@@ -44,6 +44,9 @@
         font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont,
           'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
           'Droid Sans', 'Helvetica Neue', sans-serif;
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
       }
 
       #app {
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/README.md b/packages/ui-top-nav-bar/src/MobileTopNav/README.md
new file mode 100644
index 0000000000..7fd75d41fe
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/README.md
@@ -0,0 +1,107 @@
+---
+describes: MobileTopNav
+---
+
+POC mobile top nav
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const brandSvg = (
+    <a style={{width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center'}} href="#">
+      <svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+    <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z"/>
+</svg>
+    </a>
+  )
+  return (
+    <div style={{position: 'relative', width: '420px', maxWidth: '100%', boxSizing: 'borderBox'}}>
+      <MobileTopNav brand={brandSvg}/>
+      <p>
+        1
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        2
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        3
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        4
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        5
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        6
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        7
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        8
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        9
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        10
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        11
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        12
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        13
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        14
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        15
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        16
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        17
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        18
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        19
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        20
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+    </div>
+  )
+}
+
+render(<Example />)
+```
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
new file mode 100644
index 0000000000..dae154106d
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -0,0 +1,136 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+// import { useState, useEffect, useContext } from 'react'
+
+import { useState } from 'react'
+import { jsx, useTheme } from '@instructure/emotion'
+import type { MobileTopNavProps, MobileTopNavOwnProps } from './props'
+
+import { IconButton } from '@instructure/ui-buttons'
+import {
+  IconHamburgerSolid,
+  IconEyeSolid,
+  IconXSolid
+} from '@instructure/ui-icons'
+
+/**
+---
+category: components
+---
+**/
+const MobileTopNav = ({
+  lightMode = false,
+  brand,
+  styles
+}: MobileTopNavProps) => {
+  const [open, setOpen] = useState<boolean>(false)
+
+  return (
+    <div css={{ ...styles.container, ...styles.containerHeight(open) }}>
+      <div
+        css={{
+          height: '54px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between'
+        }}
+      >
+        {brand}
+        <span
+          css={{
+            display: 'flex',
+            gap: '12px'
+          }}
+        >
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel="burgir"
+            color={lightMode ? 'secondary' : 'primary-inverse'}
+          >
+            <IconEyeSolid />
+          </IconButton>
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel="burgir"
+            color={lightMode ? 'secondary' : 'primary-inverse'}
+            onClick={() => setOpen((open) => !open)}
+          >
+            {open ? <IconXSolid /> : <IconHamburgerSolid />}
+          </IconButton>
+        </span>
+      </div>
+    </div>
+  )
+}
+
+const generateStyles = (props, theme) => {
+  const { lightMode } = props
+  return {
+    container: {
+      padding: `0 ${theme.spacing.small}`,
+      backgroundColor: lightMode
+        ? theme.colors.ui.surfacePageSecondary
+        : theme.colors.ui.surfaceDark,
+      color: lightMode
+        ? theme.colors.contrasts.grey125125
+        : theme.colors?.contrasts?.white1010,
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: '100%'
+    },
+    containerHeight: (open: boolean) => {
+      return {
+        height: open ? '100%' : '54px',
+        position: open ? 'absolute' : 'relative'
+      }
+    }
+  }
+}
+
+// eslint-disable-next-line react/display-name
+const withStyles =
+  <ComponentOwnProps, ComponentStyle>(
+    generateStyles: (props: any, theme: any) => ComponentStyle
+  ) =>
+  (WrappedComponent: any) =>
+  (originalProps: ComponentOwnProps) => {
+    const theme = useTheme()
+    const styledProps = {
+      styles: generateStyles(originalProps, theme),
+      ...originalProps
+    }
+    return <WrappedComponent {...styledProps} />
+  }
+
+const SC = withStyles(generateStyles)(MobileTopNav)
+
+export { SC as MobileTopNav }
+export default SC
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
new file mode 100644
index 0000000000..841c08cc29
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
@@ -0,0 +1,40 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { ReactNode } from 'react'
+
+type MobileTopNavOwnProps = {
+  lightMode?: boolean
+  brand?: ReactNode
+}
+
+type MobileTopNavStyle = {
+  container: {
+    [key: string]: string | number
+  }
+}
+
+type MobileTopNavProps = MobileTopNavOwnProps & { styles: MobileTopNavStyle }
+
+export type { MobileTopNavProps, MobileTopNavOwnProps }
diff --git a/packages/ui-top-nav-bar/src/index.ts b/packages/ui-top-nav-bar/src/index.ts
index aabb3c6c1a..366adfc871 100644
--- a/packages/ui-top-nav-bar/src/index.ts
+++ b/packages/ui-top-nav-bar/src/index.ts
@@ -60,3 +60,5 @@ export type {
   TopNavBarUserProps,
   TopNavBarUserOwnProps
 } from './TopNavBar/TopNavBarUser/props'
+
+export { MobileTopNav } from './MobileTopNav'

From b93c859fd5eff9da17f7b9c1973001d543458f10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20S=C3=A1ros?= <balazs.saros@instructure.com>
Date: Thu, 22 Aug 2024 16:40:04 +0200
Subject: [PATCH 2/4] WIP(ui-top-nav-bar): wip

---
 package-lock.json                             | 403 +-----------------
 packages/__docs__/src/App/index.tsx           |  51 ++-
 packages/__docs__/src/index.js                |   8 +-
 .../ui-top-nav-bar/src/MobileTopNav/README.md |  12 +-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx | 208 ++++++---
 .../ui-top-nav-bar/src/MobileTopNav/props.ts  |  17 +-
 6 files changed, 220 insertions(+), 479 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3d20ae5cf0..4e126b5487 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11508,406 +11508,6 @@
         }
       }
     },
-    "node_modules/@xn-sakina/phoenix": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@xn-sakina/phoenix/-/phoenix-1.0.3.tgz",
-      "integrity": "sha512-ux7bsSChXVW36jG6902jnO+frMUHFgOQXHNSaY9xihOKcHoGJFdOa6tOzt7J4JaMZNtFKwuZrT/WjUJL23dzvg==",
-      "deprecated": "This package will no longer be maintained",
-      "dev": true,
-      "dependencies": {
-        "esbuild": "^0.17.11",
-        "pirates": "^4.0.5"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/android-arm": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
-      "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/android-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz",
-      "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/android-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz",
-      "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz",
-      "integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/darwin-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz",
-      "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz",
-      "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz",
-      "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-arm": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz",
-      "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz",
-      "integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-ia32": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz",
-      "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-loong64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz",
-      "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz",
-      "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz",
-      "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz",
-      "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-s390x": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz",
-      "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz",
-      "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz",
-      "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz",
-      "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/sunos-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz",
-      "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/win32-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz",
-      "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/win32-ia32": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz",
-      "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/win32-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz",
-      "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@xn-sakina/phoenix/node_modules/esbuild": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
-      "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/android-arm": "0.17.19",
-        "@esbuild/android-arm64": "0.17.19",
-        "@esbuild/android-x64": "0.17.19",
-        "@esbuild/darwin-arm64": "0.17.19",
-        "@esbuild/darwin-x64": "0.17.19",
-        "@esbuild/freebsd-arm64": "0.17.19",
-        "@esbuild/freebsd-x64": "0.17.19",
-        "@esbuild/linux-arm": "0.17.19",
-        "@esbuild/linux-arm64": "0.17.19",
-        "@esbuild/linux-ia32": "0.17.19",
-        "@esbuild/linux-loong64": "0.17.19",
-        "@esbuild/linux-mips64el": "0.17.19",
-        "@esbuild/linux-ppc64": "0.17.19",
-        "@esbuild/linux-riscv64": "0.17.19",
-        "@esbuild/linux-s390x": "0.17.19",
-        "@esbuild/linux-x64": "0.17.19",
-        "@esbuild/netbsd-x64": "0.17.19",
-        "@esbuild/openbsd-x64": "0.17.19",
-        "@esbuild/sunos-x64": "0.17.19",
-        "@esbuild/win32-arm64": "0.17.19",
-        "@esbuild/win32-ia32": "0.17.19",
-        "@esbuild/win32-x64": "0.17.19"
-      }
-    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -42460,7 +42060,8 @@
         "@instructure/ui-babel-preset": "10.0.0",
         "@types/jscodeshift": "^0.11.11",
         "@types/prettier": "^2.7.3",
-        "@xn-sakina/phoenix": "^1.0.3",
+        "esbuild": "^0.23.0",
+        "pirates": "^4.0.6",
         "vitest": "^2.0.2"
       }
     },
diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index f623f2fd16..6caad73dcb 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-undef */
 /*
  * The MIT License (MIT)
  *
@@ -732,26 +733,24 @@ class App extends Component<AppProps, AppState> {
       return <LoadingScreen />
     }
 
+    const lightMode = false
     const brandSvg = (
-      // eslint-disable-next-line jsx-a11y/anchor-is-valid
-      <a
-        style={{
-          width: '28px',
-          height: '28px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }}
+      <IconButton
+        screenReaderLabel="Canvas Brand"
         href="#"
+        withBackground={false}
+        withBorder={false}
       >
         <svg
           viewBox="0 0 1920 1920"
           xmlns="http://www.w3.org/2000/svg"
           fill="#fff"
+          width="28px"
+          height="28px"
         >
           <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
         </svg>
-      </a>
+      </IconButton>
     )
 
     return (
@@ -770,7 +769,37 @@ class App extends Component<AppProps, AppState> {
             boxSizing: 'border-box'
           }}
         >
-          <MobileTopNav brand={brandSvg} />
+          <MobileTopNav brand={brandSvg} lightMode={lightMode}>
+            <MobileTopNav.BtnRow>
+              <IconButton
+                withBackground={false}
+                withBorder={false}
+                screenReaderLabel="burgir"
+                color={lightMode ? 'secondary' : 'primary-inverse'}
+              >
+                <IconAnalyticsLine />
+              </IconButton>
+              <IconButton
+                withBackground={false}
+                withBorder={false}
+                screenReaderLabel="burgir"
+                color={lightMode ? 'secondary' : 'primary-inverse'}
+              >
+                <IconAlertsLine />
+              </IconButton>
+            </MobileTopNav.BtnRow>
+            <MobileTopNav.BreadCrumb>
+              <Link href="#" isWithinText={false} color="link-inverse">
+                <div
+                  style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+                >
+                  <IconArrowOpenStartLine />
+                  Back
+                </div>
+              </Link>
+            </MobileTopNav.BreadCrumb>
+            <MobileTopNav.Title>Courses</MobileTopNav.Title>
+          </MobileTopNav>
           <p>
             1 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
             Molestias excepturi a blanditiis, aspernatur repellat repellendus
diff --git a/packages/__docs__/src/index.js b/packages/__docs__/src/index.js
index 56e9c416ef..c958c53ec8 100644
--- a/packages/__docs__/src/index.js
+++ b/packages/__docs__/src/index.js
@@ -30,9 +30,7 @@ import { InstUISettingsProvider } from '@instructure/emotion'
 import '../globals'
 
 createRoot(document.getElementById('app')).render(
-  <React.StrictMode>
-    <InstUISettingsProvider>
-      <App />
-    </InstUISettingsProvider>
-  </React.StrictMode>
+  <InstUISettingsProvider>
+    <App />
+  </InstUISettingsProvider>
 )
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/README.md b/packages/ui-top-nav-bar/src/MobileTopNav/README.md
index 7fd75d41fe..32fd6797e8 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/README.md
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/README.md
@@ -9,16 +9,16 @@ POC mobile top nav
 type: example
 ---
 const Example = () => {
+  const lightMode = false
   const brandSvg = (
-    <a style={{width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center'}} href="#">
+    <IconButton screenReaderLabel="Canvas Brand" href="#">
       <svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" fill="#fff">
-    <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z"/>
-</svg>
-    </a>
+        <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z"/>
+      </svg>
+    </IconButton>
   )
   return (
-    <div style={{position: 'relative', width: '420px', maxWidth: '100%', boxSizing: 'borderBox'}}>
-      <MobileTopNav brand={brandSvg}/>
+    <div>
       <p>
         1
   Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index dae154106d..867835e1c2 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 /*
  * The MIT License (MIT)
  *
@@ -23,18 +24,13 @@
  */
 
 /** @jsx jsx */
-// import { useState, useEffect, useContext } from 'react'
-
-import { useState } from 'react'
+import { Children, Fragment, useState, useEffect } from 'react'
+import type { PropsWithChildren } from 'react'
 import { jsx, useTheme } from '@instructure/emotion'
-import type { MobileTopNavProps, MobileTopNavOwnProps } from './props'
+import type { MobileTopNavProps } from './props'
 
 import { IconButton } from '@instructure/ui-buttons'
-import {
-  IconHamburgerSolid,
-  IconEyeSolid,
-  IconXSolid
-} from '@instructure/ui-icons'
+import { IconHamburgerLine, IconXLine } from '@instructure/ui-icons'
 
 /**
 ---
@@ -44,35 +40,28 @@ category: components
 const MobileTopNav = ({
   lightMode = false,
   brand,
-  styles
+  styles,
+  children
 }: MobileTopNavProps) => {
   const [open, setOpen] = useState<boolean>(false)
 
+  useEffect(() => {
+    const body = document.getElementsByTagName('body')[0]
+    body.style.overflow = open ? 'hidden' : 'visible'
+  }, [open])
+
+  const getSubComponent = (displayName: any) => {
+    return Children.map(children, (child: any) => child).filter(
+      (child: any) => child?.type?.displayName === displayName
+    )
+  }
+
   return (
-    <div css={{ ...styles.container, ...styles.containerHeight(open) }}>
-      <div
-        css={{
-          height: '54px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}
-      >
+    <div css={styles.container(open)}>
+      <div css={styles.topBar}>
         {brand}
-        <span
-          css={{
-            display: 'flex',
-            gap: '12px'
-          }}
-        >
-          <IconButton
-            withBackground={false}
-            withBorder={false}
-            screenReaderLabel="burgir"
-            color={lightMode ? 'secondary' : 'primary-inverse'}
-          >
-            <IconEyeSolid />
-          </IconButton>
+        <span css={styles.btnRow}>
+          {!open && getSubComponent('BtnRow')}
           <IconButton
             withBackground={false}
             withBorder={false}
@@ -80,42 +69,151 @@ const MobileTopNav = ({
             color={lightMode ? 'secondary' : 'primary-inverse'}
             onClick={() => setOpen((open) => !open)}
           >
-            {open ? <IconXSolid /> : <IconHamburgerSolid />}
+            {open ? <IconXLine /> : <IconHamburgerLine />}
           </IconButton>
         </span>
       </div>
+
+      <div style={styles.content(open)}>
+        {getSubComponent('BreadCrumb')}
+        {getSubComponent('Title')}
+        <p>
+          1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          4 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          5 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          6 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          7 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          8 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          9 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          10 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          11 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+      </div>
     </div>
   )
 }
 
-const generateStyles = (props, theme) => {
+const generateStyles = (props: MobileTopNavProps, theme: any) => {
   const { lightMode } = props
   return {
-    container: {
+    container: (open: boolean) => {
+      return {
+        height: '54px',
+        position: open ? 'fixed' : 'relative',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010,
+        width: '100%'
+      }
+    },
+    topBar: {
       padding: `0 ${theme.spacing.small}`,
-      backgroundColor: lightMode
-        ? theme.colors.ui.surfacePageSecondary
-        : theme.colors.ui.surfaceDark,
-      color: lightMode
-        ? theme.colors.contrasts.grey125125
-        : theme.colors?.contrasts?.white1010,
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      width: '100%'
+      height: '54px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
     },
-    containerHeight: (open: boolean) => {
+    content: (open: boolean) => {
       return {
-        height: open ? '100%' : '54px',
-        position: open ? 'absolute' : 'relative'
+        padding: `0 ${theme.spacing.small}`,
+        height: open ? '100%' : '0px',
+        top: '54px',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        overflow: open ? 'scroll' : 'hidden',
+        position: 'fixed',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010
       }
+    },
+    btnRow: {
+      display: 'flex',
+      gap: '12px'
     }
   }
 }
 
-// eslint-disable-next-line react/display-name
+const BtnRow = ({ children }: PropsWithChildren) => {
+  return <Fragment>{children}</Fragment>
+}
+
+BtnRow.displayName = 'BtnRow'
+
+const BreadCrumb = ({ children }: PropsWithChildren) => {
+  return <div css={{ margin: '24px 0' }}>{children}</div>
+}
+
+BreadCrumb.displayName = 'BreadCrumb'
+
+const Title = ({ children }: PropsWithChildren) => {
+  return <div css={{ margin: '32px 0' }}>{children}</div>
+}
+
+Title.displayName = 'Title'
+
 const withStyles =
   <ComponentOwnProps, ComponentStyle>(
     generateStyles: (props: any, theme: any) => ComponentStyle
@@ -130,7 +228,11 @@ const withStyles =
     return <WrappedComponent {...styledProps} />
   }
 
-const SC = withStyles(generateStyles)(MobileTopNav)
+const SC: any = withStyles(generateStyles)(MobileTopNav)
+
+SC.BtnRow = BtnRow
+SC.BreadCrumb = BreadCrumb
+SC.Title = Title
 
 export { SC as MobileTopNav }
 export default SC
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
index 841c08cc29..af0fc3d20c 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { ReactNode } from 'react'
+import type { ReactNode, PropsWithChildren } from 'react'
 
 type MobileTopNavOwnProps = {
   lightMode?: boolean
@@ -30,11 +30,22 @@ type MobileTopNavOwnProps = {
 }
 
 type MobileTopNavStyle = {
-  container: {
+  container: (open: boolean) => {
+    [key: string]: string | number
+  }
+  content: (open: boolean) => {
+    [key: string]: string | number
+  }
+  topBar: {
+    [key: string]: string | number
+  }
+  btnRow: {
     [key: string]: string | number
   }
 }
 
-type MobileTopNavProps = MobileTopNavOwnProps & { styles: MobileTopNavStyle }
+type MobileTopNavProps = MobileTopNavOwnProps & {
+  styles: MobileTopNavStyle
+} & PropsWithChildren
 
 export type { MobileTopNavProps, MobileTopNavOwnProps }

From 5bc2d608441a23c275625d9dc9f84a50986fab68 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 13 Sep 2024 09:20:57 +0200
Subject: [PATCH 3/4] WIP(ui-top-nav-bar): add item and itemlist

---
 packages/__docs__/src/App/index.tsx           |  38 +++++-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx | 120 ++++++++++--------
 .../src/MobileTopNav/styles.tsx               |  91 +++++++++++++
 3 files changed, 187 insertions(+), 62 deletions(-)
 create mode 100644 packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 6caad73dcb..6d1afe8120 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -33,12 +33,7 @@ import {
 } from 'react'
 
 import { Alert } from '@instructure/ui-alerts'
-import {
-  InstUISettingsProvider,
-  withStyle,
-  jsx,
-  Global
-} from '@instructure/emotion'
+import { InstUISettingsProvider, withStyle, jsx } from '@instructure/emotion'
 import { Flex } from '@instructure/ui-flex'
 import { Text } from '@instructure/ui-text'
 import { View } from '@instructure/ui-view'
@@ -50,8 +45,14 @@ import { Link } from '@instructure/ui-link'
 import { addMediaQueryMatchListener } from '@instructure/ui-responsive'
 import type { QueriesMatching } from '@instructure/ui-responsive'
 import {
-  IconHamburgerSolid,
+  IconAdminLine,
+  IconAlertsLine,
+  IconAnalyticsLine,
+  IconArrowOpenDownLine,
+  IconArrowOpenStartLine,
+  IconDashboardLine,
   IconHeartLine,
+  IconUserLine,
   IconXSolid
 } from '@instructure/ui-icons'
 
@@ -799,6 +800,29 @@ class App extends Component<AppProps, AppState> {
               </Link>
             </MobileTopNav.BreadCrumb>
             <MobileTopNav.Title>Courses</MobileTopNav.Title>
+            <MobileTopNav.ItemList>
+              <MobileTopNav.Item
+                leftIcon={<IconUserLine />}
+                rightIcon={<IconArrowOpenDownLine />}
+                onClick
+              >
+                Account
+              </MobileTopNav.Item>
+              <MobileTopNav.Item
+                leftIcon={<IconAdminLine />}
+                rightIcon={<IconArrowOpenDownLine />}
+                onClick
+              >
+                Admin
+              </MobileTopNav.Item>
+              <MobileTopNav.Item
+                leftIcon={<IconDashboardLine />}
+                rightIcon={<IconArrowOpenDownLine />}
+                onClick
+              >
+                Dashboard
+              </MobileTopNav.Item>
+            </MobileTopNav.ItemList>
           </MobileTopNav>
           <p>
             1 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 867835e1c2..e609fc45d3 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -24,13 +24,23 @@
  */
 
 /** @jsx jsx */
-import { Children, Fragment, useState, useEffect } from 'react'
-import type { PropsWithChildren } from 'react'
+import React, {
+  Children,
+  Fragment,
+  PropsWithChildren,
+  useEffect,
+  useState
+} from 'react'
 import { jsx, useTheme } from '@instructure/emotion'
 import type { MobileTopNavProps } from './props'
 
 import { IconButton } from '@instructure/ui-buttons'
 import { IconHamburgerLine, IconXLine } from '@instructure/ui-icons'
+import {
+  generateItemListStyles,
+  generateItemStyles,
+  generateStyles
+} from './styles'
 
 /**
 ---
@@ -57,10 +67,10 @@ const MobileTopNav = ({
   }
 
   return (
-    <div css={styles.container(open)}>
-      <div css={styles.topBar}>
+    <div style={styles.container(open)}>
+      <div style={styles.topBar}>
         {brand}
-        <span css={styles.btnRow}>
+        <span style={styles.btnRow}>
           {!open && getSubComponent('BtnRow')}
           <IconButton
             withBackground={false}
@@ -77,6 +87,7 @@ const MobileTopNav = ({
       <div style={styles.content(open)}>
         {getSubComponent('BreadCrumb')}
         {getSubComponent('Title')}
+        {getSubComponent('ItemList')}
         <p>
           1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
           excepturi a blanditiis, aspernatur repellat repellendus dolores cum
@@ -148,54 +159,6 @@ const MobileTopNav = ({
   )
 }
 
-const generateStyles = (props: MobileTopNavProps, theme: any) => {
-  const { lightMode } = props
-  return {
-    container: (open: boolean) => {
-      return {
-        height: '54px',
-        position: open ? 'fixed' : 'relative',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010,
-        width: '100%'
-      }
-    },
-    topBar: {
-      padding: `0 ${theme.spacing.small}`,
-      height: '54px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    },
-    content: (open: boolean) => {
-      return {
-        padding: `0 ${theme.spacing.small}`,
-        height: open ? '100%' : '0px',
-        top: '54px',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        overflow: open ? 'scroll' : 'hidden',
-        position: 'fixed',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010
-      }
-    },
-    btnRow: {
-      display: 'flex',
-      gap: '12px'
-    }
-  }
-}
-
 const BtnRow = ({ children }: PropsWithChildren) => {
   return <Fragment>{children}</Fragment>
 }
@@ -203,17 +166,59 @@ const BtnRow = ({ children }: PropsWithChildren) => {
 BtnRow.displayName = 'BtnRow'
 
 const BreadCrumb = ({ children }: PropsWithChildren) => {
-  return <div css={{ margin: '24px 0' }}>{children}</div>
+  return <div style={{ margin: '24px 0' }}>{children}</div>
 }
 
 BreadCrumb.displayName = 'BreadCrumb'
 
 const Title = ({ children }: PropsWithChildren) => {
-  return <div css={{ margin: '32px 0' }}>{children}</div>
+  return <div style={{ margin: '32px 0' }}>{children}</div>
 }
 
 Title.displayName = 'Title'
 
+const ItemList = ({
+  children,
+  styles
+}: PropsWithChildren & { styles: any }) => {
+  return (
+    <Fragment>
+      {Children.map(children, (child, index) => (
+        <Fragment>
+          {child}
+          {index < React.Children.count(children) - 1 && (
+            <div style={styles.divider}></div>
+          )}
+        </Fragment>
+      ))}
+    </Fragment>
+  )
+}
+
+ItemList.displayName = 'ItemList'
+
+const Item = ({
+  children,
+  leftIcon,
+  rightIcon,
+  onClick,
+  styles
+}: PropsWithChildren & {
+  leftIcon: any
+  rightIcon: any
+  onClick: any
+  styles: any
+}) => {
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    <div style={styles.container} onClick={onClick}>
+      {leftIcon && <div style={styles.leftIcon}>{leftIcon}</div>}
+      {children}
+      {rightIcon && <div style={styles.rightIcon}>{rightIcon}</div>}
+    </div>
+  )
+}
+
 const withStyles =
   <ComponentOwnProps, ComponentStyle>(
     generateStyles: (props: any, theme: any) => ComponentStyle
@@ -233,6 +238,11 @@ const SC: any = withStyles(generateStyles)(MobileTopNav)
 SC.BtnRow = BtnRow
 SC.BreadCrumb = BreadCrumb
 SC.Title = Title
+SC.ItemList = withStyles(generateItemListStyles)(ItemList)
+// TODO investigate whether displayName should be added to the original component
+SC.ItemList.displayName = 'ItemList'
+SC.Item = withStyles(generateItemStyles)(Item) //withStyles(generateItemStyles)(Item)
+SC.Item.displayName = 'Item'
 
 export { SC as MobileTopNav }
 export default SC
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
new file mode 100644
index 0000000000..eee31e74e5
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
@@ -0,0 +1,91 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { MobileTopNavProps } from './props'
+
+export const generateStyles = (props: MobileTopNavProps, theme: any) => {
+  const { lightMode } = props
+  return {
+    container: (open: boolean) => {
+      return {
+        height: '54px',
+        position: open ? 'fixed' : 'relative',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010,
+        width: '100%'
+      }
+    },
+    topBar: {
+      padding: `0 ${theme.spacing.small}`,
+      height: '54px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    content: (open: boolean) => {
+      return {
+        padding: `0 ${theme.spacing.small}`,
+        height: open ? '100%' : '0px',
+        top: '3.375rem',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        overflow: open ? 'scroll' : 'hidden',
+        position: 'fixed',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010
+      }
+    },
+    btnRow: {
+      display: 'flex',
+      gap: '12px'
+    }
+  }
+}
+export const generateItemListStyles = (_props: any, theme: any) => {
+  return {
+    divider: {
+      height: '0.0625rem',
+      overflow: 'hidden',
+      background: theme.colors.contrasts.grey1214
+    }
+  }
+}
+export const generateItemStyles = (_props: any, _theme: any) => {
+  return {
+    container: {
+      margin: '16px 0',
+      display: 'flex'
+    },
+    leftIcon: { paddingRight: '8px', fontSize: '18px' },
+    rightIcon: { marginLeft: 'auto', paddingRight: '8px', fontSize: '18px' }
+  }
+}

From 72b7733ef0d75ecbbf3dc9f6ca4e735d940bcfc9 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 13 Sep 2024 09:34:25 +0200
Subject: [PATCH 4/4] WIP(ui-top-nav-bar): some refactor

---
 packages/__docs__/src/App/index.tsx           |  6 +-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx | 66 -------------------
 .../src/MobileTopNav/styles.tsx               | 12 ++--
 3 files changed, 11 insertions(+), 73 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 6d1afe8120..ab74a4419f 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -804,21 +804,21 @@ class App extends Component<AppProps, AppState> {
               <MobileTopNav.Item
                 leftIcon={<IconUserLine />}
                 rightIcon={<IconArrowOpenDownLine />}
-                onClick
+                onClick={() => alert('Account clicked')}
               >
                 Account
               </MobileTopNav.Item>
               <MobileTopNav.Item
                 leftIcon={<IconAdminLine />}
                 rightIcon={<IconArrowOpenDownLine />}
-                onClick
+                onClick={() => alert('Admin clicked')}
               >
                 Admin
               </MobileTopNav.Item>
               <MobileTopNav.Item
                 leftIcon={<IconDashboardLine />}
                 rightIcon={<IconArrowOpenDownLine />}
-                onClick
+                onClick={() => alert('Dashboard')}
               >
                 Dashboard
               </MobileTopNav.Item>
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index e609fc45d3..b0650ebd62 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -88,72 +88,6 @@ const MobileTopNav = ({
         {getSubComponent('BreadCrumb')}
         {getSubComponent('Title')}
         {getSubComponent('ItemList')}
-        <p>
-          1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          4 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          5 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          6 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          7 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          8 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          9 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          10 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          11 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
       </div>
     </div>
   )
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
index eee31e74e5..60fbe10837 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
@@ -23,7 +23,7 @@
  */
 import type { MobileTopNavProps } from './props'
 
-export const generateStyles = (props: MobileTopNavProps, theme: any) => {
+const generateStyles = (props: MobileTopNavProps, theme: any) => {
   const { lightMode } = props
   return {
     container: (open: boolean) => {
@@ -70,7 +70,7 @@ export const generateStyles = (props: MobileTopNavProps, theme: any) => {
     }
   }
 }
-export const generateItemListStyles = (_props: any, theme: any) => {
+const generateItemListStyles = (_props: any, theme: any) => {
   return {
     divider: {
       height: '0.0625rem',
@@ -79,13 +79,17 @@ export const generateItemListStyles = (_props: any, theme: any) => {
     }
   }
 }
-export const generateItemStyles = (_props: any, _theme: any) => {
+const generateItemStyles = (_props: any, _theme: any) => {
   return {
     container: {
       margin: '16px 0',
-      display: 'flex'
+      display: 'flex',
+      cursor: 'pointer',
+      alignItems: 'flex-end'
     },
     leftIcon: { paddingRight: '8px', fontSize: '18px' },
     rightIcon: { marginLeft: 'auto', paddingRight: '8px', fontSize: '18px' }
   }
 }
+
+export { generateStyles, generateItemListStyles, generateItemStyles }