fix padding and margin

hashicorp · Sep 12, 2024 · e27cbbd · e27cbbd
1 parent 1967c96
commit e27cbbd
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/src/components/sidebar/components/sidebar-mobile-controls/sidebar-mobile-controls.module.css b/src/components/sidebar/components/sidebar-mobile-controls/sidebar-mobile-controls.module.css
@@ -8,10 +8,15 @@
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: 12px;
+
+	&.rightAlign {
+		margin-bottom: 0;
+	}
 }
 
 .rightAlign {
 	justify-content: flex-end;
+	padding-right: 16px;
 }
 
 .levelUpButton {

diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
@@ -58,6 +58,7 @@ const Sidebar = ({
 		() => addNavItemMetaData(currentPath, menuItems),
 		[currentPath, menuItems]
 	)
+	const isProductPanel = shouldRenderMobileControls && title === 'Main Menu'
 
 	let backToElement
 	if (shouldRenderMobileControls && levelButtonProps) {
@@ -135,7 +136,7 @@ const Sidebar = ({
 				showFilterInput={false}
 			/>
 		)
-	} else if (shouldRenderMobileControls && title === 'Main Menu') {
+	} else if (isProductPanel) {
 		sidebarContent = (
 			<>
 				<NavigationMenu.Root>
@@ -170,7 +171,11 @@ const Sidebar = ({
 		)
 	}
 	return (
-		<div className={classNames(s.sidebar, className)}>
+		<div
+			className={classNames(className, {
+				[s.sidebar]: !isProductPanel,
+			})}
+		>
 			{backToElement}
 			{sidebarFilterInput}
 			<nav

diff --git a/src/layouts/sidebar-sidecar/index.tsx b/src/layouts/sidebar-sidecar/index.tsx
@@ -102,7 +102,11 @@ const SidebarSidecarLayoutContent = ({
 			<MobileMenuContainer className={s.sidebarContainer} ref={sidebarRef}>
 				<div className={s.sidebarContentWrapper}>
 					<MobileAuthenticationControls
-						className={classNames(s.mobileAuthControlsContainer, s.sidePadding)}
+						className={classNames(
+							s.mobileAuthControlsContainer,
+							s.sidePadding,
+							{ [s.noMargin]: AlternateSidebar && !sidebarProps?.menuItems }
+						)}
 					/>
 					<div
 						className={classNames({

diff --git a/src/layouts/sidebar-sidecar/sidebar-sidecar-layout.module.css b/src/layouts/sidebar-sidecar/sidebar-sidecar-layout.module.css
@@ -70,6 +70,10 @@ for further details.
 
 .mobileAuthControlsContainer {
 	padding-top: 24px;
+
+	&.noMargin {
+		margin-bottom: 0;
+	}
 }
 
 /**