refactor(web): sidebar

web/src/routes/Main/Navbar.tsx

@@ -10,7 +10,7 @@ const NavbarNavItem: React.FC<{
   return (
     <div
       className={clsx(
-        'w-10 h-10 hover:rounded-lg bg-gray-300 transition-all rounded-1/2 cursor-pointer flex items-center justify-center overflow-hidden',
+        'w-12 h-12 hover:rounded-lg bg-gray-300 transition-all rounded-1/2 cursor-pointer flex items-center justify-center overflow-hidden',
         props.className
       )}
     >
@@ -27,13 +27,13 @@ export const Navbar: React.FC = React.memo(() => {
   const userInfo = useAppSelector((state) => state.user.info);
 
   return (
-    <div className="w-16 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1">
+    <div className="w-18 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1">
       {/* Navbar */}
       <div className="flex-1">
         <NavbarNavItem>
           <Avatar
             shape="square"
-            size="large"
+            size={48}
             name={userInfo?.nickname}
             src={userInfo?.avatar}
           />

web/src/routes/Main/Sidebar.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import clsx, { ClassValue } from 'clsx';
+import { Icon } from '@iconify/react';
+import { Avatar } from '../../components/Avatar';
+
+const SidebarItem: React.FC<{
+  className?: ClassValue;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+}> = React.memo((props) => {
+  return (
+    <div
+      className={clsx(
+        'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-2 h-11 flex items-center text-base group',
+        props.className
+      )}
+    >
+      <div className="flex h-8 items-center justify-center text-2xl w-8 mr-3">
+        {props.icon}
+      </div>
+      <div className="flex-1">{props.children}</div>
+      <div className="text-base p-1 cursor-pointer hidden opacity-70 group-hover:block hover:opacity-100">
+        {props.action}
+      </div>
+    </div>
+  );
+});
+SidebarItem.displayName = 'SidebarItem';
+
+const SidebarSection: React.FC<{
+  action: React.ReactNode;
+}> = React.memo((props) => {
+  return (
+    <div className="h-10 text-white flex pt-4 px-2">
+      <span className="flex-1 overflow-hidden overflow-ellipsis text-xs text-gray-300">
+        {props.children}
+      </span>
+      <div className="text-base opacity-70 hover:opacity-100 cursor-pointer">
+        {props.action}
+      </div>
+    </div>
+  );
+});
+SidebarSection.displayName = 'SidebarSection';
+
+/**
+ * 侧边栏组件
+ */
+export const Sidebar: React.FC = React.memo(() => {
+  return (
+    <div className="w-60 bg-gray-800 p-2">
+      {/* Sidebar */}
+      <SidebarItem icon={<Icon icon="mdi-account-multiple" />}>
+        好友
+      </SidebarItem>
+      <SidebarItem icon={<Icon icon="mdi-puzzle" />}>插件中心</SidebarItem>
+
+      <SidebarSection action={<Icon icon="mdi-plus" />}>私信</SidebarSection>
+
+      <SidebarItem
+        icon={<Avatar name="用户" />}
+        action={<Icon icon="mdi-close" />}
+      >
+        用户1
+      </SidebarItem>
+      <SidebarItem
+        icon={<Avatar name="用户" />}
+        action={<Icon icon="mdi-close" />}
+      >
+        用户1
+      </SidebarItem>
+      <SidebarItem
+        icon={<Avatar name="用户" />}
+        action={<Icon icon="mdi-close" />}
+      >
+        用户1
+      </SidebarItem>
+      <SidebarItem
+        icon={<Avatar name="用户" />}
+        action={<Icon icon="mdi-close" />}
+      >
+        用户1
+      </SidebarItem>
+    </div>
+  );
+});
+Sidebar.displayName = 'Sidebar';

web/src/routes/Main/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Navbar } from './Navbar';
 import { MainProvider } from './Provider';
+import { Sidebar } from './Sidebar';
 
 export const MainRoute: React.FC = React.memo(() => {
   return (
@@ -8,12 +9,8 @@ export const MainRoute: React.FC = React.memo(() => {
       <MainProvider>
         <Navbar />
 
-        <div className="w-56 bg-gray-800 p-2">
+        <Sidebar />
-          {/* Sidebar */}
+
-          <div className="w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded p-2">
-            目标
-          </div>
-        </div>
         <div className="flex-auto bg-gray-700">{/* Main Content */}</div>
       </MainProvider>
     </div>

web/tailwind.config.js

@@ -9,22 +9,24 @@ module.exports = {
   darkMode: 'class', // or 'media'
   theme: {
     screens: {
-      'lg': {'min': '1024px'},
+      lg: { min: '1024px' },
-      'md': {'max': '767px'},
+      md: { max: '767px' },
-      'sm': {'max': '639px'},
+      sm: { max: '639px' },
     },
     extend: {
       borderRadius: {
-        "1/2": '50%'
+        '1/2': '50%',
       },
       spacing: {
-        "142": "35.5rem"
+        18: '4.5rem',
-      }
+        142: '35.5rem',
+      },
     },
   },
   variants: {
     extend: {
       opacity: ['disabled'],
+      display: ['group-hover'],
       borderRadius: ['hover'],
     },
   },