Forward containerSx to Navbar

Author: LauraBeatris

packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx

@@ -70,6 +70,10 @@ export const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarP
           </Flex>
         }
         titleSx={t => ({ fontSize: t.fontSizes.$lg })}
+        containerSx={{
+          flexDirection: 'column-reverse',
+          flex: 0,
+        }}
         title={localizationKeys('configureSSO.navbar.title')}
         routes={[]}
         contentRef={contentRef}

packages/ui/src/elements/Navbar.tsx

@@ -45,14 +45,15 @@ export type NavbarRoute = {
 type NavBarProps = {
   title: LocalizationKey;
   titleSx?: ThemableCssProp;
+  containerSx?: ThemableCssProp;
   description?: LocalizationKey;
   contentRef: React.RefObject<HTMLDivElement>;
   routes: NavbarRoute[];
   header?: React.ReactNode;
 };
 
 export const NavBar = (props: NavBarProps) => {
-  const { contentRef, title, titleSx, description, routes, header } = props;
+  const { contentRef, title, titleSx, containerSx, description, routes, header } = props;
   const { close } = useNavbarContext();
   const { navigate } = useRouter();
   const { navigateToFlowStart } = useNavigateToFlowStart();
@@ -91,43 +92,45 @@ export const NavBar = (props: NavBarProps) => {
     [router.currentPath],
   );
 
-  const items = (
-    <Col
-      elementDescriptor={descriptors.navbarButtons}
-      sx={t => ({
-        gap: t.space.$0x5,
-      })}
-    >
-      {routes.map(r => (
-        <NavButton
-          key={r.id}
-          elementDescriptor={descriptors.navbarButton}
-          elementId={descriptors.navbarButton.setId(r.id as any)}
-          iconElementDescriptor={descriptors.navbarButtonIcon}
-          iconElementId={descriptors.navbarButtonIcon.setId(r.id) as any}
-          onClick={handleNavigate(r)}
-          icon={r.icon}
-          isActive={checkIfActive(r)}
-          sx={t => ({
-            padding: `${t.space.$1x5} ${t.space.$3}`,
-            minHeight: t.space.$8,
-          })}
-        >
-          <Span
-            elementDescriptor={descriptors.navbarButtonText}
-            elementId={descriptors.navbarButtonText.setId(r.id as any)}
-            localizationKey={r.name}
-          />
-        </NavButton>
-      ))}
-    </Col>
-  );
+  const items =
+    routes.length > 0 ? (
+      <Col
+        elementDescriptor={descriptors.navbarButtons}
+        sx={t => ({
+          gap: t.space.$0x5,
+        })}
+      >
+        {routes.map(r => (
+          <NavButton
+            key={r.id}
+            elementDescriptor={descriptors.navbarButton}
+            elementId={descriptors.navbarButton.setId(r.id as any)}
+            iconElementDescriptor={descriptors.navbarButtonIcon}
+            iconElementId={descriptors.navbarButtonIcon.setId(r.id) as any}
+            onClick={handleNavigate(r)}
+            icon={r.icon}
+            isActive={checkIfActive(r)}
+            sx={t => ({
+              padding: `${t.space.$1x5} ${t.space.$3}`,
+              minHeight: t.space.$8,
+            })}
+          >
+            <Span
+              elementDescriptor={descriptors.navbarButtonText}
+              elementId={descriptors.navbarButtonText.setId(r.id as any)}
+              localizationKey={r.name}
+            />
+          </NavButton>
+        ))}
+      </Col>
+    ) : null;
 
   return (
     <>
       <NavbarContainer
         title={title}
         titleSx={titleSx}
+        containerSx={containerSx}
         description={description}
       >
         {header}
@@ -145,10 +148,11 @@ const NavbarContainer = (
   props: React.PropsWithChildren<{
     title: LocalizationKey | string;
     titleSx?: ThemableCssProp;
+    containerSx?: ThemableCssProp;
     description?: LocalizationKey | string;
   }>,
 ) => {
-  const { title, titleSx, description } = props;
+  const { title, titleSx, containerSx, description } = props;
   return (
     <Col
       elementDescriptor={descriptors.navbar}
@@ -169,7 +173,7 @@ const NavbarContainer = (
     >
       <DevModeOverlay />
 
-      <Col sx={t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` })}>
+      <Col sx={[t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` }), containerSx]}>
         <Col
           sx={t => ({
             gap: t.space.$0x5,