WIP(ui-top-nav-bar): add more changes after review

Author: joyenjoyer

packages/__docs__/src/App/index.tsx

@@ -1025,7 +1025,7 @@ class App extends Component<AppProps, AppState> {
         >
           <CanvasTopNav
             brand={brandSvg}
-            lightMode={true}
+            lightMode={false}
             breadcrumb={{
               label: 'You are here:',
               links: [
@@ -1039,11 +1039,13 @@ class App extends Component<AppProps, AppState> {
             mobileButtons={[
               {
                 screenReaderLabel: 'Analytics',
-                icon: <IconAnalyticsLine />
+                icon: <IconAnalyticsLine />,
+                onClick: () => alert('Analytics clicked')
               },
               {
                 screenReaderLabel: 'Alerts',
-                icon: <IconAlertsLine />
+                icon: <IconAlertsLine />,
+                onClick: () => alert('Alerts clicked')
               }
             ]}
             mobileMenuBackNavigation={{ href: '#', label: 'Back' }}

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

@@ -76,7 +76,8 @@ const CanvasTopNav = ({
             withBackground={false}
             withBorder={false}
             screenReaderLabel={button.screenReaderLabel}
-            color={lightMode ? 'secondary' : button.color}
+            color={lightMode ? 'primary' : 'primary-inverse'}
+            onClick={button.onClick}
           >
             {button.icon}
           </IconButton>
@@ -87,7 +88,7 @@ const CanvasTopNav = ({
           <BreadcrumbLink
             href={mobileMenuBackNavigation.href}
             isWithinText={false}
-            color={lightMode ? 'link' : 'link-inverse'}
+            color={lightMode ? 'link' : 'primary-inverse'}
           >
             <div
               style={{
@@ -101,8 +102,7 @@ const CanvasTopNav = ({
             </div>
           </BreadcrumbLink>
         </Breadcrumb>
-        <MobileTopNav.Title>{mobileMenuTitle}</MobileTopNav.Title>
-        <MobileTopNav.ItemList>
+        <MobileTopNav.ItemList title={mobileMenuTitle}>
           {mobileMenu.map((item, index) => (
             <MobileTopNav.Item
               key={index}
@@ -128,17 +128,19 @@ const CanvasTopNav = ({
         >
           <IconHamburgerLine />
         </IconButton>
-        <Breadcrumb label={breadcrumb.label}>
-          {breadcrumb.links.map((link, index) =>
-            link.href ? (
-              <Breadcrumb.Link key={index} href={link.href}>
-                {link.label}
-              </Breadcrumb.Link>
-            ) : (
-              <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
-            )
-          )}
-        </Breadcrumb>
+        <div style={{ minWidth: '100%' }}>
+          <Breadcrumb label={breadcrumb.label}>
+            {breadcrumb.links.map((link, index) =>
+              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>
         <Button renderIcon={IconAddLine}>IconAddLine</Button>

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

@@ -76,7 +76,7 @@ const MobileTopNav = ({
             withBackground={false}
             withBorder={false}
             screenReaderLabel="burgir"
-            color={lightMode ? 'secondary' : 'primary-inverse'}
+            color={lightMode ? 'primary' : 'primary-inverse'}
             onClick={() => setOpen((open) => !open)}
           >
             {open ? <IconXLine /> : <IconHamburgerLine />}
@@ -105,10 +105,12 @@ Title.displayName = 'Title'
 
 const ItemList = ({
   children,
+  title,
   styles
-}: PropsWithChildren & { styles: any }) => {
+}: PropsWithChildren & { styles: any; title: any }) => {
   return (
     <Fragment>
+      {title && <Title>{title}</Title>}
       {Children.map(children, (child, index) => (
         <Fragment>
           {child}