fix: tab overflow (#33)

* fix: tab promote size

* fix: tab-overflow

* fix: delete useless code

src/components/layouts/BasicLayout/Header/index.module.less

@@ -9,7 +9,6 @@
   z-index: 250;
   transition: transform 0.2s;
 
-
   .wrapper {
     margin: auto;
     max-width: 1440px;
@@ -122,6 +121,15 @@
     display: none;
   }
 }
+.tab-more {
+  line-height: 5rem;
+  font-size: 1.25rem;
+  height: 100%;
+  height: 5rem;
+  color: var(--juejin-text-1);
+  cursor: pointer;
+  position: relative;
+}
 .tab-first {
   line-height: 5rem;
   margin-left: 1rem;

src/components/layouts/BasicLayout/Header/index.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import type { FC } from 'react'
 import { useContext, useState } from 'react'
 
+import { Collapse, Expand } from '~/components/universal/Icons/TabIcon'
 import { IconNight, IconSun } from '~/components/universal/Icons/dark-mode'
 import { JuejinFont, Logo as JuejinLogo } from '~/components/universal/Logo'
 import { InitialContext } from '~/context/initial-data'
@@ -22,7 +23,6 @@ export const SwitchTheme = () => {
     </div>
   )
 }
-
 const TabItem: FC<TabModule> = ({ slug, title, tag }) => {
   const router = useRouter()
   return (
@@ -47,6 +47,7 @@ const Header = observer(() => {
     appStore: { isNarrowThanLaptop, viewport },
   } = useStore()
   const [hidden, setHidden] = useState(true)
+  const [tabExpand, setTabExpand] = useState(false)
   const { tab } = useContext(InitialContext)
   const { appStore } = useStore()
   return (
@@ -78,17 +79,29 @@ const Header = observer(() => {
               {tab[0].title}
             </div>
           )}
-
           {!(isNarrowThanLaptop ? hidden : false) && (
             <div
               className={clsx(
                 styles.tab,
                 isNarrowThanLaptop && styles['tab-mobile'],
               )}
             >
-              {tab.map((tab) => (
-                <TabItem key={tab._id} {...tab} />
-              ))}
+              {tab
+                .slice(0, isNarrowThanLaptop || tabExpand ? undefined : 9)
+                .map((tab) => (
+                  <TabItem key={tab._id} {...tab} />
+                ))}
+              {tab.length > 9 && !isNarrowThanLaptop && (
+                <div
+                  className={styles['tab-more']}
+                  onClick={() => {
+                    setTabExpand(!tabExpand)
+                  }}
+                  title={tabExpand ? '收起' : '展开'}
+                >
+                  {tabExpand ? <Collapse /> : <Expand />}
+                </div>
+              )}
             </div>
           )}
         </div>

src/components/universal/Icons/TabIcon.tsx

@@ -0,0 +1,33 @@
+import style from './icon.module.less'
+
+export const Expand = () => {
+  return (
+    <svg
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      className={style.icon}
+      height="60"
+    >
+      <path
+        d="M498.752 288l224 224-224 224L544 781.248 813.248 512 544 242.752 498.752 288z m-288 0l224 224-224 224L256 781.248 525.248 512 256 242.752 210.752 288z"
+        data-spm-anchor-id="a313x.7781069.0.i0"
+      />
+    </svg>
+  )
+}
+export const Collapse = () => {
+  return (
+    <svg
+      className={style.icon}
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="60"
+    >
+      <path d="M525.248 288l-224 224 224 224L480 781.248 210.752 512 480 242.752 525.248 288z m288 0l-224 224 224 224L768 781.248 498.752 512 768 242.752 813.248 288z" />
+    </svg>
+  )
+}

src/components/universal/Icons/icon.module.less

@@ -0,0 +1,4 @@
+.icon {
+  fill: var(--juejin-font-1);
+  transition: fill 0.1s;
+}