diff --git a/frontend/src/views/Dashboard/Dashboard.vue b/frontend/src/views/Dashboard/Dashboard.vue
index 1a27a49..2d607f3 100644
--- a/frontend/src/views/Dashboard/Dashboard.vue
+++ b/frontend/src/views/Dashboard/Dashboard.vue
@@ -173,11 +173,6 @@ const { activeSection, activeLabel, sections, selectSection } = useDashboardNavi
diff --git a/frontend/src/views/Dashboard/DashboardLayout.css b/frontend/src/views/Dashboard/DashboardLayout.css
index 83a87e0..649d97c 100644
--- a/frontend/src/views/Dashboard/DashboardLayout.css
+++ b/frontend/src/views/Dashboard/DashboardLayout.css
@@ -49,12 +49,14 @@
.dashboard-workspace {
display: grid;
- grid-template-columns: 208px minmax(0, 1fr);
+ grid-template-columns: minmax(0, 1fr) clamp(176px, 20%, 220px);
+ grid-template-areas: "main submenu";
gap: 18px;
min-height: 0;
}
.dashboard-content {
+ grid-area: main;
min-width: 0;
min-height: 0;
overflow: auto;
@@ -140,7 +142,7 @@
@media (max-width: 1100px) {
.dashboard-workspace {
- grid-template-columns: 180px minmax(0, 1fr);
+ grid-template-columns: minmax(0, 1fr) 180px;
gap: 14px;
}
@@ -190,6 +192,9 @@
.dashboard-workspace {
grid-template-columns: 1fr;
+ grid-template-areas:
+ "main"
+ "submenu";
}
.dashboard-content {
diff --git a/frontend/src/views/Dashboard/DashboardNavigation.css b/frontend/src/views/Dashboard/DashboardNavigation.css
index a0c1b86..772fe1e 100644
--- a/frontend/src/views/Dashboard/DashboardNavigation.css
+++ b/frontend/src/views/Dashboard/DashboardNavigation.css
@@ -1,20 +1,22 @@
.dashboard-navigation {
+ grid-area: submenu;
+ position: sticky;
+ top: 0;
display: flex;
flex-direction: column;
- gap: 5px;
+ gap: 2px;
min-height: 0;
overflow-y: auto;
- padding: 22px 12px 14px;
- border: 1px solid #e2e8f2;
- border-radius: 18px;
- background: #fff;
+ padding: 2px 0 2px 12px;
+ border-left: 1px solid #e2e8f2;
+ background: transparent;
}
.navigation-heading {
display: flex;
align-items: center;
gap: 10px;
- padding: 0 10px 18px;
+ padding: 2px 8px 14px;
}
.navigation-heading div {
@@ -24,7 +26,7 @@
.navigation-heading strong {
color: #263752;
- font-size: 19px;
+ font-size: 15px;
}
.navigation-heading span,
@@ -35,16 +37,17 @@
}
.navigation-group {
- margin: 14px 12px 4px;
+ margin: 14px 8px 4px;
}
.navigation-item {
+ position: relative;
display: flex;
align-items: center;
gap: 11px;
width: 100%;
- min-height: 43px;
- padding: 10px 12px;
+ min-height: 36px;
+ padding: 7px 10px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
@@ -61,12 +64,23 @@
}
.navigation-item.active {
- border-color: #dce6f6;
+ border-color: transparent;
background: #edf3fc;
color: #315aaa;
font-weight: 700;
}
+.navigation-item.active::before {
+ content: "";
+ position: absolute;
+ top: 9px;
+ bottom: 9px;
+ left: -13px;
+ width: 3px;
+ border-radius: 3px;
+ background: currentColor;
+}
+
.navigation-item:focus-visible {
outline: 2px solid #315aaa;
outline-offset: 2px;
@@ -91,16 +105,20 @@
}
.navigation-footer {
- margin: auto 12px 0;
- padding-top: 28px;
+ margin: auto 8px 0;
+ padding-top: 22px;
}
@media (max-width: 760px) {
.dashboard-navigation {
+ position: static;
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
- padding: 10px;
+ padding: 12px;
+ border: 1px solid #e2e8f2;
+ border-radius: 14px;
+ background: #fff;
overflow: visible;
}