Restyled the Side navigation in the UI

dstackai/dstack-cloud#189
dstackai · Aug 19, 2024 · 5dd9f2c · 5dd9f2c
1 parent 27abb5b
commit 5dd9f2c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git 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
@@ -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
@@ -41,7 +41,8 @@
     "tutorial_other": "Tour",
     "docs": "Docs",
     "discord": "Discord",
-    "danger_zone": "Danger Zone"
+    "danger_zone": "Danger Zone",
+    "control_plane": "Control plane"
   },
 
   "auth": {