update header

pingcap-inc · Jul 8, 2024 · d6d0ae2 · d6d0ae2
1 parent a07db21
commit d6d0ae2
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 97 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v18.20.3
diff --git a/packages/site-components/src/components/header/Header.tsx b/packages/site-components/src/components/header/Header.tsx
@@ -28,7 +28,7 @@ const Header = ({showSearch = true}: HeaderProps): JSX.Element => {
             <header className="ti-site-header">
                 <div className="ti-site-header__container">
                     <TidbCommunityLogo/>
-                    <Space size="lg"/>
+                    <Space size="md"/>
 
                     {
                         showSearch && (

diff --git a/packages/site-components/src/components/header/HeaderMenu.tsx b/packages/site-components/src/components/header/HeaderMenu.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Menu } from 'antd'
+import { Menu, Space } from 'antd';
 import { navItems } from './menu-items'
 import { createMenuItem } from '../../utils/nav-item'
-import { LoadingOutlined, MenuOutlined } from '@ant-design/icons'
+import { CaretDownFilled, LoadingOutlined, MenuOutlined } from '@ant-design/icons';
 import { AntWrapper, Responsive, SwrData } from '@pingcap-inc/tidb-community-ui'
 import { useMeData } from '../../datasource/accounts'
 import { HeaderBreakpoint } from './constants'
@@ -20,7 +20,7 @@ const HeaderMenu = ({ style }: { style?: React.CSSProperties }): JSX.Element =>
       mode="horizontal"
       getPopupContainer={getContainer}
       overflowedIndicator={
-        <MenuOutlined />
+        <Space size={2}>其他<CaretDownFilled style={{fontSize: 8, color: '#A0A0A0', marginRight: -6}} /></Space>
       }>
       <AntWrapper>
         {props => (

diff --git a/packages/site-components/src/components/header/Space.tsx b/packages/site-components/src/components/header/Space.tsx
@@ -4,10 +4,11 @@ import { Responsive } from '@pingcap-inc/tidb-community-ui'
 
 const sizes = {
   lg: (width: number) => width > headerBreakpoints.md ? 64 : 24,
+  md: (width: number) => width > headerBreakpoints.md ? 48 : 16,
   sm: (width: number) => width > headerBreakpoints.md ? 24 : 8,
 }
 
-const Space = ({ size, children }: PropsWithChildren<{ size: number | 'lg' | 'sm' }>): JSX.Element => {
+const Space = ({ size, children }: PropsWithChildren<{ size: number | 'lg' | 'md' | 'sm' }>): JSX.Element => {
   const { width } = useContext(Responsive.Context)
   if (typeof size === 'string') {
     size = sizes[size](width)

diff --git a/packages/site-components/src/components/header/menu-items.ts b/packages/site-components/src/components/header/menu-items.ts
@@ -2,6 +2,15 @@ import {Site} from '../../utils/site'
 import {NavItem} from '../../utils/nav-item'
 
 export const navItems: NavItem[] = [
+  {
+    key: 'asktug-ranking',
+    title: '商业咨询',
+    config: {
+      site: Site.home,
+      url: '/support',
+      newWindow: true,
+    }
+  },
   {
     key: 'doc',
     title: '文档',
@@ -29,15 +38,6 @@ export const navItems: NavItem[] = [
       newWindow: false,
     },
   },
-  {
-    key: 'events',
-    title: '活动',
-    config: {
-      site: Site.home,
-      url: '/events',
-      newWindow: false,
-    },
-  },
   {
     key: 'courses',
     title: '课程',
@@ -71,115 +71,109 @@ export const navItems: NavItem[] = [
       }
     ],
   },
+  {
+    key: 'events',
+    title: '活动',
+    config: {
+      site: Site.home,
+      url: '/events',
+      newWindow: false,
+    },
+  },
   {
     key: 'asktug-ranking',
-    title: '商业咨询',
+    title: '排行榜',
+    config: {
+      site: Site.asktug,
+      url: '/x/ranking',
+      newWindow: false
+    }
+  },
+  {
+    key: 'tug',
+    title: 'TiDB User Group',
     config: {
       site: Site.home,
-      url: '/support',
+      url: '/tug',
       newWindow: false
     }
   },
   {
-    key: 'discover',
-    title: '发现',
+    key: 'regional-meetup',
+    title: '地区活动',
+    config: {
+      site: Site.home,
+      url: '/regional-meetup',
+      newWindow: false
+    }
+  },
+  {
+    key: 'developers',
+    title: '贡献者专区',
     children: [
       {
-        key: 'asktug-ranking',
-        title: '排行榜',
-        config: {
-          site: Site.asktug,
-          url: '/x/ranking',
-          newWindow: false
-        }
-      },
-      {
-        key: 'tug',
-        title: 'TiDB User Group',
-        config: {
-          site: Site.home,
-          url: '/tug',
-          newWindow: false
-        }
-      },
-      {
-        key: 'regional-meetup',
-        title: '地区活动',
+        key: 'contribute',
+        title: '如何贡献代码',
         config: {
-          site: Site.home,
-          url: '/regional-meetup',
-          newWindow: false
+          site: Site.others,
+          url: 'https://pingcap.github.io/tidb-dev-guide',
+          newWindow: true
         }
       },
       {
-        key: 'developers',
-        title: '贡献者专区',
-        children: [
-          {
-            key: 'contribute',
-            title: '如何贡献代码',
-            config: {
-              site: Site.others,
-              url: 'https://pingcap.github.io/tidb-dev-guide',
-              newWindow: true
-            }
-          },
-          {
-            key: 'internals',
-            title: '开发者论坛',
-            config: {
-              site: Site.others,
-              url: 'https://internals.tidb.io',
-              newWindow: true
-            }
-          },
-          {
-            key: 'incubator',
-            title: '孵化器项目',
-            config: {
-              site: Site.others,
-              url: 'https://github.com/pingcap/community/tree/master/incubator',
-              newWindow: true
-            }
-          },
-          {
-            key: 'books',
-            title: '电子书',
-            config: {
-              site: Site.home,
-              url: '/book',
-              newWindow: false
-            }
-          },
-        ]
-      },
-      {
-        key: 'jobs',
-        title: '工作机会',
+        key: 'internals',
+        title: '开发者论坛',
         config: {
           site: Site.others,
-          url: 'https://tidb-jobs.pingcap.com/',
+          url: 'https://internals.tidb.io',
           newWindow: true
         }
       },
       {
-        key: 'principal',
-        title: '社区准则',
+        key: 'incubator',
+        title: '孵化器项目',
         config: {
           site: Site.others,
-          url: 'https://github.com/pingcap/community/blob/master/CODE_OF_CONDUCT.md',
+          url: 'https://github.com/pingcap/community/tree/master/incubator',
           newWindow: true
         }
       },
       {
-        key: 'contact us',
-        title: '联系我们',
+        key: 'books',
+        title: '电子书',
         config: {
           site: Site.home,
-          url: '/contact-us',
-          newWindow: true,
-        },
+          url: '/book',
+          newWindow: false
+        }
       },
     ]
-  }
+  },
+  {
+    key: 'jobs',
+    title: '工作机会',
+    config: {
+      site: Site.others,
+      url: 'https://tidb-jobs.pingcap.com/',
+      newWindow: true
+    }
+  },
+  {
+    key: 'principal',
+    title: '社区准则',
+    config: {
+      site: Site.others,
+      url: 'https://github.com/pingcap/community/blob/master/CODE_OF_CONDUCT.md',
+      newWindow: true
+    }
+  },
+  {
+    key: 'contact us',
+    title: '联系我们',
+    config: {
+      site: Site.home,
+      url: '/contact-us',
+      newWindow: true,
+    },
+  },
 ]
diff --git a/packages/site-components/src/components/header/style.less b/packages/site-components/src/components/header/style.less
@@ -2,6 +2,7 @@
 @import "../../mixins";
 
 @menu-prefix-cls: ~'@{ant-prefix}-menu';
+@menu-item-padding: 0 12px;
 
 .ti-site-header {
   .fade-enter {

diff --git a/packages/site-components/src/utils/nav-item.tsx b/packages/site-components/src/utils/nav-item.tsx
@@ -2,7 +2,7 @@ import { RouteToConfig } from './site'
 import {Badge, Menu, Space} from 'antd'
 import React from 'react'
 import SiteLink from '../components/site-link/SiteLink'
-import {DownOutlined} from "@ant-design/icons";
+import { CaretDownFilled, DownOutlined } from '@ant-design/icons';
 
 export interface NavItem {
   key: string
@@ -29,7 +29,7 @@ export function createMenuItem ({ key, title, config, children, badge, level }:
     )
   } else if (children && children.length > 0) {
     return (
-      <Menu.SubMenu key={key} title={<Space>{wrapped}{intLevel === 0 && <DownOutlined style={{color: '#A0A0A0', marginRight: -6}} />}</Space>} popupOffset={[0, 20]}>
+      <Menu.SubMenu key={key} title={<Space size={2}>{wrapped}{intLevel === 0 && <CaretDownFilled style={{fontSize: 8, color: '#A0A0A0', marginRight: -6}} />}</Space>} popupOffset={[0, 20]}>
         {children.map((value) => createMenuItem({...value, level: intLevel + 1}))}
       </Menu.SubMenu>
     )