retain header size on collapse

client/src/Components/sidebar/index.tsx

@@ -32,7 +32,7 @@ export const Sidebar = () => {
 	const navigate = useNavigate();
 	const location = useLocation();
 	const { t } = useTranslation();
-	const { width, transition, collapsed } = useSidebar();
+	const { width, transition, transitionTiming, collapsed } = useSidebar();
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const menu = getMenu(t);
@@ -94,16 +94,10 @@ export const Sidebar = () => {
 					/>
 					{menu.map((group, groupIndex) => (
 						<Box key={group.group}>
-							{collapsed ? (
-								groupIndex > 0 && (
-									<Divider
-										sx={{
-											borderColor: theme.palette.divider,
-											marginY: theme.spacing(LAYOUT.XS),
-										}}
-									/>
-								)
-							) : (
+							<Box
+								position="relative"
+								overflow="hidden"
+							>
 								<Typography
 									variant="eyebrow"
 									component="div"
@@ -112,10 +106,27 @@ export const Sidebar = () => {
 									paddingLeft={theme.spacing(5)}
 									paddingTop={theme.spacing(LAYOUT.SM)}
 									paddingBottom={theme.spacing(LAYOUT.XXS)}
+									whiteSpace="nowrap"
+									sx={{
+										opacity: collapsed ? 0 : 1,
+										transition: `opacity ${transitionTiming}`,
+									}}
 								>
 									{group.group}
 								</Typography>
-							)}
+								{groupIndex > 0 && (
+									<Divider
+										sx={{
+											position: "absolute",
+											top: "50%",
+											left: 0,
+											right: 0,
+											opacity: collapsed ? 1 : 0,
+											transition: `opacity ${transitionTiming}`,
+										}}
+									/>
+								)}
+							</Box>
 							{group.items.map((item) => {
 								const selected = location.pathname.startsWith(`/${item.path}`);
 								return (

client/src/Hooks/useSidebar.ts

@@ -6,7 +6,8 @@ const SIDEBAR_WIDTH_VAR = 250;
 const SIDEBAR_COLLAPSED_WIDTH_VAR = 64;
 
 // Transition timing for sidebar width changes
-const SIDEBAR_TRANSITION = "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)";
+const SIDEBAR_TRANSITION_TIMING = "650ms cubic-bezier(0.36, -0.01, 0, 0.77)";
+const SIDEBAR_TRANSITION = `width ${SIDEBAR_TRANSITION_TIMING}`;
 
 export const useSidebar = () => {
 	const collapsed = useSelector(
@@ -19,6 +20,7 @@ export const useSidebar = () => {
 		expandedWidth: SIDEBAR_WIDTH_VAR,
 		width: collapsed ? SIDEBAR_COLLAPSED_WIDTH_VAR : SIDEBAR_WIDTH_VAR,
 		transition: SIDEBAR_TRANSITION,
+		transitionTiming: SIDEBAR_TRANSITION_TIMING,
 	};
 };