demo: menu improvements (#171)

AmadeusITGroup · Oct 4, 2023 · a58f486 · a58f486
1 parent 4218d3f
commit a58f486
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/demo/src/routes/[framework]/menu/SideMenu.svelte b/demo/src/routes/[framework]/menu/SideMenu.svelte
@@ -9,7 +9,7 @@
 <nav class="w-100 mt-1">
 	{#each menu as { title, submenu }}
 		<strong class="d-flex w-100 align-items-center fw-semibold">{title}</strong>
-		<div>
+		<div class="my-2">
 			{#each submenu as { label, path }}
 				{@const isCurrent = $page.route.id?.startsWith(`/[framework]${path}`)}
 				<a

diff --git a/demo/src/routes/[framework]/menu/menu.scss b/demo/src/routes/[framework]/menu/menu.scss
@@ -22,20 +22,23 @@ $mobileMargin: 16px;
 }
 
 .menu-item-sidenav {
-	padding: 0.5rem;
+	padding: 0.1rem 0.5rem;
 	border: 0px solid var(--bs-body-bg);
 	border-width: 2px 0;
 
 	&.active {
-		background-color: var(--bs-secondary-bg);
-		border-color: var(--bs-secondary-bg);
+		color: var(--bs-primary);
 	}
 
-	&:focus {
-		border-color: var(--bs-primary-border-subtle);
+	@include media-breakpoint-down(md) {
+		&:focus {
+			border-color: var(--bs-primary-border-subtle);
+		}
 	}
 
 	@include media-breakpoint-down(md) {
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem;
 		padding-left: $mobileMargin * 2;
 		padding-right: $mobileMargin * 2;
 	}