diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
index 5953626a51..bf7e10038b 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
@@ -52,6 +52,16 @@ export const StretchContainer = styled(Box)(({ theme }) => ({
overflowAnchor: 'none',
}));
+// 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 }) => ({
+ position: 'sticky',
+ paddingBottom: theme.spacing(1.5),
+ paddingTop: theme.spacing(1),
+ bottom: theme.spacing(0),
+ backgroundColor: theme.palette.background.paper,
+ borderTop: `1px solid ${theme.palette.divider}`,
+}));
+
export const NavigationSidebar = () => {
const { routes } = useRoutes();
@@ -73,7 +83,6 @@ export const NavigationSidebar = () => {
return (
- setMode('full')} />
{
/>
)}
- {
- setMode(mode === 'full' ? 'mini' : 'full');
- }}
- />
+ {/* this will push the show/hide to the bottom on short nav list */}
+
+
+
+ setMode('full')}
+ />
+ {
+ setMode(mode === 'full' ? 'mini' : 'full');
+ }}
+ />
+
);
};
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
index e7b4950c6b..754b019ed7 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
@@ -18,6 +18,7 @@ import { NewInUnleashItem } from './NewInUnleashItem';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
const StyledNewInUnleash = styled('div')(({ theme }) => ({
+ margin: theme.spacing(2, 0, 1, 0),
borderRadius: theme.shape.borderRadiusMedium,
[theme.breakpoints.down('lg')]: {
margin: theme.spacing(2),
@@ -25,6 +26,10 @@ const StyledNewInUnleash = styled('div')(({ theme }) => ({
},
}));
+const StyledListItem = styled(ListItem)(({ theme }) => ({
+ margin: theme.spacing(1, 0, 1, 0),
+}));
+
const StyledNewInUnleashHeader = styled('p')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
@@ -106,7 +111,7 @@ export const NewInUnleash = ({
if (mode === 'mini' && onMiniModeClick) {
return (
-
+
@@ -119,7 +124,7 @@ export const NewInUnleash = ({
-
+
);
}
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
index b3cc6e4d68..72db756721 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
@@ -13,16 +13,6 @@ const ShowHideRow = styled(Box, {
alignItems: 'center',
padding: theme.spacing(0, 1, 0, mode === 'mini' ? 1.5 : 2),
cursor: 'pointer',
- position: 'sticky',
- bottom: theme.spacing(2),
- width: '100%',
-}));
-
-// This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen.
-const ShowHideContainer = styled(Box)(({ theme }) => ({
- flexGrow: 1,
- display: 'flex',
- alignItems: 'end',
}));
export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
@@ -30,32 +20,30 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
onChange,
}) => {
return (
-
-
- {mode === 'full' && (
- ({
- color: theme.palette.neutral.main,
- fontSize: 'small',
- })}
- >
- Hide (⌘ + B)
-
+
+ {mode === 'full' && (
+ ({
+ color: theme.palette.neutral.main,
+ fontSize: 'small',
+ })}
+ >
+ Hide (⌘ + B)
+
+ )}
+
+ {mode === 'full' ? (
+
+ ) : (
+
+
+
)}
-
- {mode === 'full' ? (
-
- ) : (
-
-
-
- )}
-
-
-
+
+
);
};