new features

src/entities/NavigationDrawer/NavigationDrawer.module.scss

@@ -1,33 +1,62 @@
+@use "@shared/styles/variables" as *;
 
 .drawer {
-	background: transparent;
+	background: transparent !important;
 }
 
 .root {
 	display: flex;
 	flex-direction: column;
-	min-width: 220px;
 	height: 100%;
-	padding: 16px 12px;
-	background: #ffffff;
-	border-radius: 12px 12px 0 0;
-	box-shadow: 0 10px 30px rgba(12, 18, 38, 0.08);
+	background: variables.$bg-default;
+	border-radius: 0 variables.$radius-lg variables.$radius-lg 0;
+	box-shadow: var(--shadow-lg);
+	overflow: hidden;
 }
 
 .header {
-	margin-bottom: 12px;
-	font-weight: 700;
-	font-size: 16px;
-	color: #0c1226;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 16px 16px 12px;
+	border-bottom: 1px solid variables.$border-subtle;
+}
+
+.brand {
+	@include typography.font-body-16(600);
+	color: variables.$text-primary;
+	letter-spacing: -0.01em;
+}
+
+.closeButton {
+	@include mixins.flex-center;
+	width: 32px;
+	height: 32px;
+	border: none;
+	border-radius: variables.$radius-sm;
+	background: transparent;
+	color: variables.$text-secondary;
+	cursor: pointer;
+	transition: background-color 0.15s ease, color 0.15s ease;
+
+	&:hover {
+		background-color: variables.$bg-surface;
+		color: variables.$text-primary;
+	}
+
+	svg {
+		width: 18px;
+		height: 18px;
+	}
 }
 
 .list {
-	list-style: none;
-	margin: 0;
-	padding: 0;
+	@include mixins.reset-list;
 	display: flex;
 	flex-direction: column;
-	gap: 6px;
+	gap: 2px;
+	padding: 8px;
+	flex: 1;
 }
 
 .item {
@@ -36,40 +65,44 @@
 
 .link,
 .button {
-	display: inline-flex;
+	display: flex;
 	align-items: center;
 	gap: 10px;
 	width: 100%;
 	padding: 10px 12px;
 	border: none;
-	border-radius: 10px;
+	border-radius: variables.$radius-sm;
 	background: transparent;
-	color: #0c1226;
+	color: variables.$text-secondary;
 	text-decoration: none;
-	font-weight: 600;
-	font-size: 14px;
-	line-height: 1.4;
+	@include typography.font-body-14(500);
 	cursor: pointer;
-	transition: background-color 0.2s ease, color 0.2s ease;
-}
+	transition: background-color 0.15s ease, color 0.15s ease;
 
-.link:hover,
-.button:hover,
-.link:focus-visible,
-.button:focus-visible {
-	outline: none;
-	background-color: #f4f6fb;
+	&:hover {
+		background-color: variables.$bg-surface;
+		color: variables.$text-primary;
+	}
+
+	&:focus-visible {
+		outline: 2px solid variables.$color-secondary;
+		outline-offset: -2px;
+		border-radius: variables.$radius-sm;
+	}
+
+	&.active {
+		background-color: variables.$bg-surface;
+		color: variables.$text-primary;
+	}
 }
 
 .icon {
 	display: inline-flex;
+	flex-shrink: 0;
 	width: 18px;
 	height: 18px;
-	color: #5a6473;
 }
 
 .label {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+	@include mixins.text-ellipsis;
 }