feat: navbar调整

Author: OweQian

components/navbar/index.tsx

@@ -1,20 +1,25 @@
-import {FC, useContext, useEffect} from "react";
+import {FC, useContext, useState} from "react";
 import styles from "./styles.module.scss";
 import Image from "next/image";
 import logoIcon from "@/public/logo-icon.svg";
 import logoTextDark from "@/public/logo-text-dark.svg";
 import logoText from "@/public/logo-text.svg";
 import {ThemeContext} from "@/stores/theme";
-import {IconGithubLogo, IconMoon, IconSun} from '@douyinfe/semi-icons';
+import { Tooltip, SideSheet } from '@douyinfe/semi-ui';
+import {IconGithubLogo, IconMoon, IconSun, IconBox} from '@douyinfe/semi-icons';
 import {Themes} from "@/constants/enum";
 
 export interface INavBarProps {
 }
 
 const NavBar: FC<INavBarProps> = ({}) => {
+  const [visible, setVisible] = useState<boolean>(false);
   const {setTheme, theme} = useContext(ThemeContext);
   const icon = theme === Themes.light ? logoTextDark : logoText;
   const iconTheme = theme === Themes.light ? <IconMoon size="extra-large"/> : <IconSun size="extra-large"/>;
+  const onChange = () => {
+    setVisible(!visible);
+  };
   return (
     <div className={styles.navBar}>
       <a href="https://iotsharp.io/">
@@ -32,7 +37,14 @@ const NavBar: FC<INavBarProps> = ({}) => {
             }
           }}
         >
-          {iconTheme}
+          <Tooltip position="bottom" content={Themes.light ? '切换到暗色模式' : '切换到亮色模式'}>
+            {iconTheme}
+          </Tooltip>
+        </div>
+        <div className={styles.icon} onClick={onChange}>
+          <Tooltip position="bottom" content="查看安装包">
+            <IconBox size="extra-large"/>
+          </Tooltip>
         </div>
         <div className={styles.icon} onClick={(): void => {
           window.open(
@@ -41,9 +53,14 @@ const NavBar: FC<INavBarProps> = ({}) => {
             "noopener=yes,noreferrer=yes"
           );
         }}>
-          <IconGithubLogo size="extra-large"/>
+          <Tooltip position="bottom" content="查看Github">
+            <IconGithubLogo size="extra-large"/>
+          </Tooltip>
         </div>
       </div>
+      <SideSheet title="安装包" visible={visible} onCancel={onChange} placement="right">
+        <p>Here is more content...</p>
+      </SideSheet>
     </div>
   );
 };

components/navbar/styles.module.scss

@@ -4,18 +4,19 @@
   justify-content: space-between;
   background-color: hsla(0,0%,100%,.5);
   backdrop-filter: blur(0.5rem);
+  border-bottom: 1px solid var(--semi-color-border);
   width: 100%;
   height: 4rem;
   position: sticky;
   top: 0;
   left: 0;
-  padding: 1.25rem 8rem;
+  padding: 1.25rem 2rem;
   z-index: 100;
   box-sizing: border-box;
 
   .icon {
     cursor: pointer;
-    margin-left: 1rem;
+    margin-left: 1.8rem;
   }
 
   a {