From a58f4860eb0a6ca764d0349db19e283d55600d78 Mon Sep 17 00:00:00 2001
From: Basso <fabrice.basso@amadeus.com>
Date: Wed, 4 Oct 2023 11:28:45 +0200
Subject: [PATCH] demo: menu improvements (#171)

---
 demo/src/routes/[framework]/menu/SideMenu.svelte |  2 +-
 demo/src/routes/[framework]/menu/menu.scss       | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/demo/src/routes/[framework]/menu/SideMenu.svelte b/demo/src/routes/[framework]/menu/SideMenu.svelte
index cb604a6081..aad32b2985 100644
--- 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
index 7d5b42c7f3..1c8f9a97be 100644
--- 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;
 	}