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; }