From 5dd9f2cb8affb171f44c27a470fa139e96fc6bde Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Mon, 19 Aug 2024 22:43:32 +0300
Subject: [PATCH] Restyled the Side navigation in the UI
 https://github.com/dstackai/dstack-cloud/issues/189

---
 frontend/src/layouts/AppLayout/hooks.ts  | 15 +++++++++------
 frontend/src/layouts/AppLayout/index.tsx |  9 ++++++++-
 frontend/src/locale/en.json              |  3 ++-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/layouts/AppLayout/hooks.ts b/frontend/src/layouts/AppLayout/hooks.ts
index 75eb6a850..ab0d61b6d 100644
--- a/frontend/src/layouts/AppLayout/hooks.ts
+++ b/frontend/src/layouts/AppLayout/hooks.ts
@@ -64,20 +64,23 @@ export const useSideNavigation = () => {
 
     const navLinks: SideNavigationProps['items'] = [
         projectsDropdownList.length && {
-            type: 'section',
-            text: t('navigation.project'),
+            type: 'section-group',
+            title: t('navigation.project'),
             items: projectLinks,
         },
+        projectsDropdownList.length && { type: 'divider' },
 
         isAvailableAdministrationLinks && {
-            type: 'section',
-            text: t('navigation.administration'),
+            type: 'section-group',
+            title: t('navigation.administration'),
             items: administrationLinks,
         },
 
+        isAvailableAdministrationLinks && { type: 'divider' },
+
         {
-            type: 'section',
-            text: t('navigation.account'),
+            type: 'section-group',
+            title: t('navigation.account'),
             items: userSettingsLinks,
         },
     ].filter(Boolean) as SideNavigationProps['items'];
diff --git a/frontend/src/layouts/AppLayout/index.tsx b/frontend/src/layouts/AppLayout/index.tsx
index a2e43ffd4..bec3817a7 100644
--- a/frontend/src/layouts/AppLayout/index.tsx
+++ b/frontend/src/layouts/AppLayout/index.tsx
@@ -204,7 +204,14 @@ const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
                 splitPanelOpen
                 breadcrumbs={renderBreadcrumbs()}
                 notifications={<Notifications />}
-                navigation={<SideNavigation activeHref={activeHref} items={navLinks} onFollow={onFollowHandler} />}
+                navigation={
+                    <SideNavigation
+                        header={{ href: '#', text: t('common.control_plane') }}
+                        activeHref={activeHref}
+                        items={navLinks}
+                        onFollow={onFollowHandler}
+                    />
+                }
                 tools={
                     <>
                         <Tabs
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 223b47928..6ed961bec 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -41,7 +41,8 @@
     "tutorial_other": "Tour",
     "docs": "Docs",
     "discord": "Discord",
-    "danger_zone": "Danger Zone"
+    "danger_zone": "Danger Zone",
+    "control_plane": "Control plane"
   },
 
   "auth": {