feat(headerBar): add icon

Author: Labmem-00

app/components/Home/ChanTitle.tsx

@@ -6,18 +6,19 @@ import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { Press_Start_2P } from 'next/font/google';
 import { useDebounce } from '@/hooks/useDebounce';
+import { useMediaQuery } from 'react-responsive';
 
 const banger = Press_Start_2P({ weight: ['400'], subsets: ['latin'] });
 const ChanTitle: React.FC = () => {
   const [aniState, setAniState] = useState(false);
   const [hoverState, setHoverState] = useState(false); // 用来控制鼠标悬浮时显示图片3
-
   const [isShow, setIsShow] = useState(false);
+  const isXsOrSmaller = useMediaQuery({ query: '(max-width: 520px)' });
   const pathName = usePathname();
 
   const handleMouseEnter = useDebounce(() => {
     setHoverState(true);
-    console.log('ni')
+    console.log('ni');
   }, 200);
   const handleMouseLeave = useDebounce(() => {
     setHoverState(false);
@@ -70,7 +71,10 @@ const ChanTitle: React.FC = () => {
             </animated.div>
           )}
         </span>
-        <animated.span className={banger.className} style={propsText}>
+        <animated.span
+          className={banger.className}
+          style={isXsOrSmaller ? undefined : propsText}
+        >
           @CHAN
         </animated.span>
       </div>

app/components/Home/Nav/HeaderBar/HeaderItem/HeaderNav.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styles from '../headerBar.module.scss';
+import ChanLink from '@/components/Partial/ChanLink';
+import { Icon } from '@iconify/react/dist/iconify.cjs';
+
+type link = {
+  name: string;
+  href: string;
+};
+
+interface HeaderNavProps {
+  links: link[];
+}
+
+const HeaderNav: React.FC<HeaderNavProps> = ({ links }) => {
+  return (
+    <nav className={styles['nav-bar']}>
+      <div className="ld:hidden">
+        <Icon
+          icon="line-md:close-to-menu-alt-transition"
+          width={36}
+          height={36}
+        ></Icon>
+      </div>
+      <div className='hidden ld:flex'>
+        {links.map((link) => {
+          return (
+            <ChanLink to={link.href} key={link.name}>
+              {link.name}
+            </ChanLink>
+          );
+        })}
+      </div>
+    </nav>
+  );
+};
+
+export default HeaderNav;

app/components/Home/Nav/HeaderBar/Modal.tsx renamed to app/components/Home/Nav/HeaderBar/HeaderItem/Modal.tsx

@@ -11,7 +11,7 @@ const Modal: React.FC = () => {
         <button>登录</button>
       </div>
       <div className="config">
-        <Icon icon='eos-icons:rotating-gear' width={30} height={30}></Icon>
+        <Icon icon='eos-icons:rotating-gear' width={36} height={36}></Icon>
       </div>
     </div>
   );

app/components/Home/Nav/HeaderBar/Search.tsx renamed to app/components/Home/Nav/HeaderBar/HeaderItem/Search.tsx

@@ -2,13 +2,19 @@
     display: flex;
     position: relative;
     border: 1px solid red;
-
+    align-items: center;
+    margin-left: 1%;
     & a {
         padding: 1rem;
     }
+    
+    & a{
+        border: 1px solid black;
+    }
 }
 
 .chan-header {
+    height: 60px;
     margin-right: 0.5%;
     margin-left: 0.5%;
     border-radius: 12px;

app/components/Home/Nav/HeaderBar/headerBar.module.scss

@@ -1,9 +1,7 @@
-'use client';
-
-import ChanLink from '@/components/Partial/ChanLink';
 import styles from './headerBar.module.scss';
-import Search from './Search';
-import Modal from './Modal';
+import Search from './HeaderItem/Search';
+import Modal from './HeaderItem/Modal';
+import HeaderNav from './HeaderItem/HeaderNav';
 
 const links = [
   { name: '主页', href: '/' },
@@ -18,15 +16,7 @@ const HeaderBar: React.FC = () => {
       id="chan-header"
       className={` ${styles['chan-header']} flex items-center sticky top-0 border-2 border-balck border-solid`}
     >
-      <nav className={styles['nav-bar']}>
-        {links.map((link) => {
-          return (
-            <ChanLink to={link.href} key={link.name}>
-              {link.name}
-            </ChanLink>
-          );
-        })}
-      </nav>
+      <HeaderNav links={links}></HeaderNav>
       <Search></Search>
       <Modal></Modal>
     </header>

app/components/Home/Nav/HeaderBar/index.tsx

@@ -22,13 +22,13 @@ export default function RootLayout({
             <HeaderBar></HeaderBar>   
             <div id='chan' className="flex justify-center gap-4 min-w-0">
               <SkipLink></SkipLink>
-              <aside></aside>
+              {/* <aside></aside> */}
               <div id="content">
                 <main id="main-content">
                   {children}      
                   <footer>footer</footer>
                 </main>
-                <aside id="r-aside"></aside>
+                {/* <aside id="r-aside"></aside> */}
               </div>
             </div>
           </ThemeProvider>

app/layout.tsx

@@ -24,7 +24,8 @@
     "pusher": "^5.2.0",
     "pusher-js": "8.4.0-rc2",
     "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106"
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react-responsive": "^10.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.0",
@@ -33,6 +34,7 @@
     "@types/prop-types": "^15.7.14",
     "@types/react": "^18.3.14",
     "@types/react-dom": "^18.3.2",
+    "@types/react-responsive": "^8.0.8",
     "@zinkawaii/stylelint-config": "^0.2.2",
     "clsx": "^2.1.1",
     "eslint": "8.57.0",

package.json

@@ -10,7 +10,8 @@ export default {
   theme: {
     extend: {
       screens:{
-        'xs': '480px'
+        'xs': '520px',
+        'ld': '900px',
       }
     },
   },