add media query to set proper margin on small viewports

Signed-off-by: Jenny <[email protected]> remove left marign fix masthead toggle alignment fix comment fix import order
kubeflow · Jan 20, 2025 · 0e18610 · 0e18610
1 parent f9f78c3
commit 0e18610
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/clients/ui/frontend/src/app/NavBar.tsx b/clients/ui/frontend/src/app/NavBar.tsx
@@ -6,14 +6,17 @@ import {
   Masthead,
   MastheadContent,
   MastheadMain,
+  MastheadToggle,
   MenuToggle,
   MenuToggleElement,
+  PageToggleButton,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
 import { SimpleSelect } from '@patternfly/react-templates';
+import { BarsIcon } from '@patternfly/react-icons';
 import { NamespaceSelectorContext } from '~/shared/context/NamespaceSelectorContext';
 
 interface NavBarProps {
@@ -46,7 +49,13 @@ const NavBar: React.FC<NavBarProps> = ({ username, onLogout }) => {
 
   return (
     <Masthead>
-      <MastheadMain />
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+      </MastheadMain>
       <MastheadContent>
         <Toolbar>
           <ToolbarContent>

diff --git a/clients/ui/frontend/src/shared/style/MUI-theme.scss b/clients/ui/frontend/src/shared/style/MUI-theme.scss
@@ -747,7 +747,6 @@
   --pf-v6-c-masthead--BackgroundColor: var(--mui-palette-common-white);
   box-shadow: var(--mui-shadows-1);
   min-height: var(--kf-central-app-bar-height);
-  margin-left: var(--kf-central-app-drawer-width);
 }
 
 .mui-theme .pf-v6-c-modal-box {
@@ -798,3 +797,17 @@
 .mui-theme .pf-v6-c-page__main-container {
   margin-top: var(--kf-central-app-bar-height); /* Move content area below the app bar */
 }
+
+/* Hide Masthead Toggle by default */
+.mui-theme .pf-v6-c-masthead__toggle {
+  display: none;
+}
+
+/* Show Masthead Toggle on viewports below 1270px */
+@media (max-width: 1270px) {
+  .mui-theme .pf-v6-c-masthead__toggle {
+    display: block;
+    padding-block-start: var(--mui-spacing-4px);
+  }
+}
+