add: sidebar style setting

lablup · Aug 29, 2024 · 7de2c60 · 7de2c60
1 parent c5ee37e
commit 7de2c60
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/react/src/components/BAIMenu.tsx b/react/src/components/BAIMenu.tsx
@@ -33,6 +33,11 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
             Menu: {
               itemBorderRadius: 20,
               itemMarginInline: 0,
+              colorPrimaryBorder: token.colorInfoHover,
+              itemHoverBg: token.colorInfoHover,
+              itemHoverColor: token.colorPrimaryBg,
+              itemSelectedBg: token.colorInfoHover,
+              itemSelectedColor: token.colorPrimaryBg,
             },
           },
         }}

diff --git a/react/src/components/MainLayout/MainLayout.tsx b/react/src/components/MainLayout/MainLayout.tsx
@@ -11,7 +11,7 @@ import PasswordChangeRequestAlert from '../PasswordChangeRequestAlert';
 import { DRAWER_WIDTH } from '../WEBUINotificationDrawer';
 import WebUIHeader from './WebUIHeader';
 import WebUISider from './WebUISider';
-import { App, Layout, theme } from 'antd';
+import { App, Layout, Space, theme } from 'antd';
 import { atom, useSetAtom } from 'jotai';
 import { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate, Outlet } from 'react-router-dom';
@@ -135,8 +135,9 @@ function MainLayout() {
         <BAIContentWithDrawerArea drawerWidth={DRAWER_WIDTH}>
           <Flex
             ref={contentScrollFlexRef}
-            direction="column"
+            direction="row"
             align="stretch"
+            gap="lg"
             style={{
               // paddingLeft: token.paddingContentHorizontalLG,
               // paddingRight: token.paddingContentHorizontalLG,
@@ -155,19 +156,17 @@ function MainLayout() {
                   </div>
                 }
               >
-                <Flex>
-                  <WebUISider
-                    collapsed={sideCollapsed}
-                    onBreakpoint={(broken) => {
-                      if (broken) {
-                        setSideCollapsed(true);
-                      } else {
-                        !compactSidebarActive && setSideCollapsed(false);
-                      }
-                    }}
-                    webuiplugins={webUIPlugins}
-                  />
-                </Flex>
+                <WebUISider
+                  collapsed={sideCollapsed}
+                  onBreakpoint={(broken) => {
+                    if (broken) {
+                      setSideCollapsed(true);
+                    } else {
+                      !compactSidebarActive && setSideCollapsed(false);
+                    }
+                  }}
+                  webuiplugins={webUIPlugins}
+                />
               </Suspense>
               {/* <Flex direction="column"> */}
 
@@ -211,10 +210,10 @@ function MainLayout() {
               <Suspense>
                 <Outlet />
               </Suspense>
-              {/* To match paddig to 16 (2+14) */}
-              {/* </Flex> */}
-              {/* @ts-ignore */}
-              <backend-ai-webui id="webui-shell" ref={webUIRef} />
+              <Flex direction="column" align="start" gap="lg">
+                {/* @ts-ignore */}
+                <backend-ai-webui id="webui-shell" ref={webUIRef} />
+              </Flex>
             </BAIErrorBoundary>
           </Flex>
         </BAIContentWithDrawerArea>

diff --git a/react/src/components/MainLayout/WebUISider.tsx b/react/src/components/MainLayout/WebUISider.tsx
@@ -78,12 +78,12 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
     {
       label: 'Start', // t('webui.menu.Summary'),
       icon: <PlayCircleOutlined />,
-      key: 'start', // 'summary',
+      key: 'summary', // 'summary',
     },
     {
       label: 'Dashboard',
       icon: <DashboardOutlined />,
-      key: 'summary',
+      key: 'dashboard',
     },
     {
       key: 'storage',

diff --git a/resources/theme.json b/resources/theme.json
@@ -5,6 +5,7 @@
       "fontFamily": "'Ubuntu', Roboto, sans-serif",
       "colorPrimaryBg": "#FF7A00",
       "colorFillContent": "#FF9D00",
+      "colorInfoHover": "#FFE3B7",
       "colorLink": "#FF9D00",
       "colorLinkHover": "#FF9D00",
       "colorSuccess": "#37B076",