Fixed sidebar and navigation tabs visibility on mobile devices

Signed-off-by: Mariusz Winnik <[email protected]>
headlamp-k8s · Feb 15, 2024 · 63c60b4 · 63c60b4
1 parent 5cf3f0d
commit 63c60b4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/frontend/src/components/Sidebar/NavigationTabs.tsx b/frontend/src/components/Sidebar/NavigationTabs.tsx
@@ -12,9 +12,12 @@ import Tabs from '../common/Tabs';
 import { SidebarItemProps } from '../Sidebar';
 import prepareRoutes from './prepareRoutes';
 
-const useStyle = makeStyles(() => ({
+const useStyle = makeStyles(theme => ({
  tabs: {
  maxWidth: '85vw',
+ [theme.breakpoints.down('sm')]: {
+ paddingTop: '10px',
+ },
  },
 }));
 

diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -31,6 +31,7 @@ import VersionButton from './VersionButton';
 export const drawerWidth = 240;
 export const mobileDrawerWidth = 320;
 export const drawerWidthClosed = 64;
+export const topBarHeight = 64;
 
 // exported for backwards compatibility for plugins
 export { DefaultSidebars };
@@ -48,6 +49,9 @@ const useStyle = makeStyles(theme => ({
  duration: theme.transitions.duration.enteringScreen,
  }),
  background: theme.palette.sidebarBg,
+ [theme.breakpoints.down('sm')]: {
+ paddingTop: `${topBarHeight}px`,
+ },
  },
  drawerClose: {
  transition: theme.transitions.create('width', {

diff --git a/frontend/src/lib/themes.ts b/frontend/src/lib/themes.ts
@@ -196,6 +196,9 @@ const commonRules = {
  },
  MuiAppBar: {
  styleOverrides: {
+ root: {
+ height: '64px',
+ },
  colorPrimary: {
  backgroundColor: '#f5f5f5',
  },