add: draft for GNB with new icons

react/src/components/BAIMenu.tsx

@@ -1,19 +1,18 @@
 import { ConfigProvider, Menu, MenuProps, theme } from 'antd';
+import _ from 'lodash';
 import React from 'react';
 
-// interface BAIMenuProps extends MenuProps {
-
-// }
-
-const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
+interface BAIMenuProps extends MenuProps {
+  isAdminMenu?: boolean;
+}
+const BAIMenu: React.FC<BAIMenuProps> = ({ ...props }) => {
   const { token } = theme.useToken();
   return (
     <>
       <style>
         {`
           .bai-menu li.ant-menu-item.ant-menu-item-selected {
             overflow: visible;
-            font-weight: 600;
           }
 
           .bai-menu li.ant-menu-item.ant-menu-item-selected::before {
@@ -22,7 +21,6 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
             bottom: 0;
             position: absolute;
             right: auto;
-            border-right: 3px solid ${token.colorPrimary};
             transform: scaleY(1);
             opacity: 1;
             content: "";
@@ -33,8 +31,23 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
         theme={{
           components: {
             Menu: {
-              itemBorderRadius: 2,
+              itemBorderRadius: 20,
               itemMarginInline: 0,
+              colorPrimaryBorder: props.isAdminMenu
+                ? token.colorSuccess
+                : token.colorInfoHover,
+              itemHoverBg: props.isAdminMenu
+                ? token.colorSuccessBgHover
+                : token.colorInfoHover,
+              itemHoverColor: props.isAdminMenu
+                ? token.colorSuccessHover
+                : token.colorPrimaryBg,
+              itemSelectedBg: props.isAdminMenu
+                ? token.colorSuccessBgHover
+                : token.colorInfoHover,
+              itemSelectedColor: props.isAdminMenu
+                ? token.colorSuccessHover
+                : token.colorPrimaryBg,
             },
           },
         }}

react/src/components/BAINotificationButton.tsx

@@ -10,7 +10,9 @@ import { atom, useAtom } from 'jotai';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
 
-interface Props extends ButtonProps {}
+interface Props extends ButtonProps {
+  iconColor?: string;
+}
 export const isOpenDrawerState = atom(false);
 
 const BAINotificationButton: React.FC<Props> = ({ ...props }) => {
@@ -37,7 +39,7 @@ const BAINotificationButton: React.FC<Props> = ({ ...props }) => {
         size="large"
         icon={
           <Badge dot={hasRunningBackgroundTask}>
-            <BellOutlined />
+            <BellOutlined style={{ color: props.iconColor ?? 'inherit' }} />
           </Badge>
         }
         type="text"

react/src/components/BAISider.tsx

@@ -1,4 +1,5 @@
 import Flex from './Flex';
+import { DRAWER_WIDTH } from './WEBUINotificationDrawer';
 import { ConfigProvider, Grid, SiderProps, Typography, theme } from 'antd';
 import Sider from 'antd/es/layout/Sider';
 import _ from 'lodash';
@@ -56,7 +57,7 @@ const BAISider: React.FC<BAISiderProps> = ({
         `}
       </style>
       <Sider
-        width={221}
+        width={DRAWER_WIDTH}
         breakpoint="md"
         style={{
           overflowX: 'hidden',
@@ -65,7 +66,7 @@ const BAISider: React.FC<BAISiderProps> = ({
           position: 'sticky',
           top: 0,
           left: 0,
-          borderRight: '1px solid',
+          background: '#FFF',
           borderColor: token.colorBorder,
           paddingTop: token.paddingContentVerticalSM,
           scrollbarColor: 'auto',
@@ -86,7 +87,7 @@ const BAISider: React.FC<BAISiderProps> = ({
             algorithm: siderTheme === 'dark' ? theme.darkAlgorithm : undefined,
           }}
         >
-          <Flex
+          {/* <Flex
             direction="column"
             justify="start"
             align="start"
@@ -120,7 +121,7 @@ const BAISider: React.FC<BAISiderProps> = ({
                 {otherProps.collapsed ? logoTitleCollapsed : logoTitle}
               </Typography.Text>
             </div>
-          </Flex>
+          </Flex> */}
           {children}
           {bottomText && (
             <>

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, Button, 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';
@@ -122,61 +122,62 @@ function MainLayout() {
           </>
         }
       >
-        <WebUISider
-          collapsed={sideCollapsed}
-          onBreakpoint={(broken) => {
-            if (broken) {
-              setSideCollapsed(true);
-            } else {
-              !compactSidebarActive && setSideCollapsed(false);
-            }
-          }}
-          webuiplugins={webUIPlugins}
+        <WebUIHeader
+          onClickMenuIcon={() => setSideCollapsed((v) => !v)}
+          containerElement={contentScrollFlexRef.current}
         />
       </Suspense>
       <Layout
         style={{
           backgroundColor: 'transparent',
         }}
       >
+        <Suspense
+          fallback={
+            <div>
+              <Layout.Header style={{ visibility: 'hidden', height: 62 }} />
+            </div>
+          }
+        >
+          <WebUISider
+            collapsed={sideCollapsed}
+            onBreakpoint={(broken) => {
+              if (broken) {
+                setSideCollapsed(true);
+              } else {
+                !compactSidebarActive && setSideCollapsed(false);
+              }
+            }}
+            webuiplugins={webUIPlugins}
+          />
+        </Suspense>
         <BAIContentWithDrawerArea drawerWidth={DRAWER_WIDTH}>
           <Flex
             ref={contentScrollFlexRef}
-            direction="column"
+            direction="row"
             align="stretch"
+            gap="lg"
             style={{
-              paddingLeft: token.paddingContentHorizontalLG,
-              paddingRight: token.paddingContentHorizontalLG,
+              // paddingLeft: token.paddingContentHorizontalLG,
+              // paddingRight: token.paddingContentHorizontalLG,
+              marginTop: 24,
               paddingBottom: token.paddingContentVertical,
               height: '100vh',
               overflow: 'auto',
             }}
           >
             <BAIErrorBoundary>
-              <Suspense
-                fallback={
-                  <div>
-                    <Layout.Header
-                      style={{ visibility: 'hidden', height: 62 }}
-                    />
-                  </div>
-                }
+              <Flex
+                direction="row"
+                align="stretch"
+                gap="lg"
+                style={{ marginTop: 100 }}
               >
-                <div
-                  style={{
-                    margin: `0 -${token.paddingContentHorizontalLG}px 0 -${token.paddingContentHorizontalLG}px`,
-                    position: 'sticky',
-                    top: 0,
-                    zIndex: HEADER_Z_INDEX_IN_MAIN_LAYOUT,
-                  }}
-                >
-                  <NetworkStatusBanner />
-                  <WebUIHeader
-                    onClickMenuIcon={() => setSideCollapsed((v) => !v)}
-                    containerElement={contentScrollFlexRef.current}
-                  />
-                </div>
-              </Suspense>
+                <Suspense>
+                  {/* @ts-ignore */}
+                  <backend-ai-webui id="webui-shell" ref={webUIRef} />
+                </Suspense>
+              </Flex>
               {/* <Flex direction="column"> */}
 
               {/* TODO: Breadcrumb */}
@@ -219,10 +220,6 @@ function MainLayout() {
               <Suspense>
                 <Outlet />
               </Suspense>
-              {/* To match paddig to 16 (2+14) */}
-              {/* </Flex> */}
-              {/* @ts-ignore */}
-              <backend-ai-webui id="webui-shell" ref={webUIRef} />
             </BAIErrorBoundary>
           </Flex>
         </BAIContentWithDrawerArea>