1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00

feat: fixed full mode navbar width (#7999)

This commit is contained in:
Mateusz Kwasniewski 2024-08-28 11:07:55 +02:00 committed by GitHub
parent 3d22f6e909
commit bed4f66fa2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -41,17 +41,19 @@ export const MobileNavigationSidebar: FC<{ onClick: () => void }> = ({
); );
}; };
export const StretchContainer = styled(Box)(({ theme }) => ({ export const StretchContainer = styled(Box)<{ mode: string }>(
backgroundColor: theme.palette.background.paper, ({ theme, mode }) => ({
padding: theme.spacing(2), backgroundColor: theme.palette.background.paper,
alignSelf: 'stretch', padding: theme.spacing(2),
display: 'flex', alignSelf: 'stretch',
flexDirection: 'column', display: 'flex',
gap: theme.spacing(2), flexDirection: 'column',
zIndex: 1, gap: theme.spacing(2),
overflowAnchor: 'none', zIndex: 1,
maxWidth: theme.spacing(40), overflowAnchor: 'none',
})); width: mode === 'full' ? theme.spacing(40) : 'auto',
}),
);
// This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen. // This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen.
const StickyContainer = styled(Box)(({ theme }) => ({ const StickyContainer = styled(Box)(({ theme }) => ({
@ -83,7 +85,7 @@ export const NavigationSidebar = () => {
}, [initialPathname]); }, [initialPathname]);
return ( return (
<StretchContainer> <StretchContainer mode={mode}>
<PrimaryNavigationList <PrimaryNavigationList
mode={mode} mode={mode}
onClick={setActiveItem} onClick={setActiveItem}