feat(ui-top-nav-bar): add stuff

Author: joyenjoyer

packages/__docs__/src/App/index.tsx

@@ -63,7 +63,7 @@ class App extends Component<AppProps, AppState> {
   }
 
   isCoursePage() {
-    return location.pathname.startsWith('/courses')
+    return location.pathname.startsWith('/course')
   }
 
   componentDidMount() {
@@ -172,24 +172,14 @@ class App extends Component<AppProps, AppState> {
             id: 'courses1',
             label: 'Courses1',
             onClick: () => {
-              this.props.navigate('/courses/course1', { replace: true })
-              setTimeout(() => {
-                window.location.reload()
-              }, 50) // Small delay ensures React updates before reloading
-
-              // window.location.reload()
+              this.props.navigate('/course1', { replace: true })
             }
           },
           {
             id: 'courses2',
             label: 'Courses2',
             onClick: () => {
-              this.props.navigate('/courses/course2', { replace: true })
-              setTimeout(() => {
-                window.location.reload()
-              }, 50) // Small delay ensures React updates before reloading
-
-              // window.location.reload()
+              this.props.navigate('/course2', { replace: true })
             }
           }
         ]
@@ -226,12 +216,16 @@ class App extends Component<AppProps, AppState> {
                 <SideNavBar.Item
                   icon={<IconUserLine />}
                   label="Account"
-                  href="/account"
+                  onClick={() =>
+                    this.props.navigate('/account', { replace: true })
+                  }
                 />
                 <SideNavBar.Item
                   icon={<IconCoursesLine />}
                   label="Courses"
-                  href="/courses"
+                  onClick={() =>
+                    this.props.navigate('/course1', { replace: true })
+                  }
                 />
                 <SideNavBar.Item
                   icon={<IconDashboardLine />}
@@ -243,7 +237,7 @@ class App extends Component<AppProps, AppState> {
                 <SideNavBar.Item
                   icon={<IconQuestionLine />}
                   label="Help"
-                  href="#"
+                  onClick={() => alert('Help clicked')}
                 />
               </SideNavBar>
             )}
@@ -254,6 +248,7 @@ class App extends Component<AppProps, AppState> {
             <CanvasTopNav
               brand={brandSvg}
               lti={false}
+              showDesktopView={this.isCoursePage()}
               buttons={[
                 {
                   label: 'AddLine',
@@ -269,11 +264,12 @@ class App extends Component<AppProps, AppState> {
               breadcrumb={{
                 label: 'You are here:',
                 links: [
-                  { href: '#', label: 'Student Forecast' },
-                  { href: '#', label: 'University of Utah' },
-                  { label: 'University of Colleges' }
+                  { href: '#', label: 'Crumb 1' },
+                  { href: '#', label: 'Crumb 2' },
+                  { label: 'Home' }
                 ]
               }}
+              hamburgerLabel="Open the main menu"
               hamburgerOnClick={() => alert('Hamburger clicked')}
               mobileButtons={[
                 {
@@ -311,8 +307,12 @@ class App extends Component<AppProps, AppState> {
                     element={<h1>This is the account page</h1>}
                   />
                   <Route
-                    path="/courses"
-                    element={<h1>This is a course home page</h1>}
+                    path="/course1"
+                    element={<h1>This is the first course home page</h1>}
+                  />
+                  <Route
+                    path="/course2"
+                    element={<h1>This is the second course home page</h1>}
                   />
                 </Routes>
               </div>

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

@@ -51,6 +51,8 @@ const CanvasTopNav = ({
   mobileButtons = [],
   mobileMenu = [],
   hamburgerOnClick,
+  hamburgerLabel,
+  showDesktopView,
   styles
 }: any) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
@@ -135,39 +137,41 @@ const CanvasTopNav = ({
       </MobileTopNav.Menu>
     </MobileTopNav>
   ) : (
-    <DesktopTopNav lightMode={lti}>
-      <DesktopTopNav.Start>
-        <IconButton
-          withBackground={false}
-          withBorder={false}
-          screenReaderLabel="burgir"
-          onClick={hamburgerOnClick}
-          // color={lti ? 'secondary' : 'primary-inverse'}
-        >
-          <IconHamburgerLine />
-        </IconButton>
-        <div style={{ minWidth: '100%' }}>
-          <Breadcrumb label={breadcrumb.label}>
-            {breadcrumb.links.map((link: any, index: any) =>
-              link.href ? (
-                <Breadcrumb.Link key={index} href={link.href}>
-                  {link.label}
-                </Breadcrumb.Link>
-              ) : (
-                <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
-              )
-            )}
-          </Breadcrumb>
-        </div>
-      </DesktopTopNav.Start>
-      <DesktopTopNav.End>
-        {buttons.map((button: any) => (
-          <Button key={button.label} renderIcon={button.icon}>
-            {button.label}
-          </Button>
-        ))}
-      </DesktopTopNav.End>
-    </DesktopTopNav>
+    <div style={{ display: showDesktopView ? 'block' : 'none' }}>
+      <DesktopTopNav lightMode={lti}>
+        <DesktopTopNav.Start>
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel={hamburgerLabel}
+            onClick={hamburgerOnClick}
+            // color={lti ? 'secondary' : 'primary-inverse'}
+          >
+            <IconHamburgerLine />
+          </IconButton>
+          <div style={{ minWidth: '100%' }}>
+            <Breadcrumb label={breadcrumb.label}>
+              {breadcrumb.links.map((link: any, index: any) =>
+                link.href ? (
+                  <Breadcrumb.Link key={index} href={link.href}>
+                    {link.label}
+                  </Breadcrumb.Link>
+                ) : (
+                  <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
+                )
+              )}
+            </Breadcrumb>
+          </div>
+        </DesktopTopNav.Start>
+        <DesktopTopNav.End>
+          {buttons.map((button: any) => (
+            <Button key={button.label} renderIcon={button.icon}>
+              {button.label}
+            </Button>
+          ))}
+        </DesktopTopNav.End>
+      </DesktopTopNav>
+    </div>
   )
 }