refactor(ui): adjust global navigation bar style (#13419)

### What problem does this PR solve?

Renovate global navigation bar, align styles to the design.
(May causes minor layout issues in sub-pages, will check and fix soon)

### Type of change

- [x] Refactoring

web/src/pages/user-setting/index.tsx

@@ -1,52 +1,15 @@
 import { Outlet } from 'react-router';
 import { SideBar } from './sidebar';
 
-import { PageHeader } from '@/components/page-header';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
-import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { cn } from '@/lib/utils';
-import { House } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import styles from './index.module.less';
 
 const UserSetting = () => {
-  const { t } = useTranslation();
-  const { navigateToHome } = useNavigatePage();
-
   return (
-    <section className="flex flex-col h-full">
-      <PageHeader>
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink onClick={navigateToHome}>
-                <House className="size-4" />
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{t('setting.profile')}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </PageHeader>
-      <div
-        className={cn(
-          styles.settingWrapper,
-          'overflow-auto flex flex-1 pt-4 pr-4 pb-4',
-        )}
-      >
-        <SideBar></SideBar>
-        <div className={cn(styles.outletWrapper, 'flex flex-1 rounded-lg')}>
-          <Outlet></Outlet>
-        </div>
+    <section className="pt-8 size-full grid grid-cols-[auto_1fr] grid-rows-1">
+      <SideBar></SideBar>
+
+      <div className={cn('pr-6 pb-6 flex flex-1 rounded-lg overflow-hidden')}>
+        <Outlet></Outlet>
       </div>
     </section>
   );