增加nav

EOEFANS · Jan 7, 2023 · f4990ef · f4990ef
1 parent 827d028
commit f4990ef
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.0.7",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/routers/layout/layout.module.less b/src/routers/layout/layout.module.less
@@ -80,19 +80,66 @@
     display: none;
 }
 
-.navstack {
-    // width: 500px;
-    overflow-x: scroll;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+.nav {
+    position: relative;
+    overflow: hidden;
+    margin: 10px;
+
+    .navstack {
+        overflow-x: auto;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        @itemWidth: 80px;
+        @itemMarginHalfWidth: 8px;
+        @itemMarginHalfHeight: 4px;
+        // grid布局
+        grid-template-columns: repeat(auto-fill, @itemWidth+2*@itemMarginHalfWidth);
+        transition: display 2s;
+
+        &>* {
+            margin: @itemMarginHalfHeight @itemMarginHalfWidth;
+        }
+
+        &[data-showed=true] {
+            &>span:nth-last-child(2) {
+                display: none;
+            }
+
+            &>div:last-child {
+                position: relative;
+            }
+        }
 
-    .navlink {
-        text-decoration: none;
+        &-filter-tag {
+            width: @itemWidth;
+            flex: 0 0 @itemWidth;
+        }
+
+        .navlink {
+            text-decoration: none;
 
-        &-active>div {
-            // background-color: ;
+            &-active>div {
+                // background-color: ;
+            }
         }
     }
+
+    &-right-show-btn {
+        justify-content: center;
+        margin: 0 !important;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        height: 40px;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        overflow: hidden;
+        background-color: #fff;
+        box-shadow: rgb(255 255 255) -11px 0px 12px 0px;
+        z-index: 1;
+        cursor: pointer;
+    }
 }
 
 //todo 写好header
diff --git a/src/routers/layout/nav.tsx b/src/routers/layout/nav.tsx
@@ -1,4 +1,7 @@
 import { Chip, Stack } from "@mui/material";
+import { useInView } from "react-intersection-observer";
+import SegmentIcon from "@mui/icons-material/Segment";
+import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
 import {
   Outlet,
   NavLink,
@@ -10,7 +13,7 @@ import {
 } from "react-router-dom";
 import { nanoid } from "nanoid";
 import styles from "./layout.module.less";
-import { FC, useState } from "react";
+import { FC, forwardRef, useState, useEffect, useMemo } from "react";
 
 const router_lists = [
   {
@@ -80,9 +83,12 @@ const nav_lists = [
 
 export default function Header_Nav() {
   //todo 这里存放到context中间去
-  return (
-    <>
-      <Stack direction='row' spacing={2} className={styles["navstack"]}>
+  const { ref, inView } = useInView({ initialInView: true });
+  const [showed, setShow] = useState(false);
+  console.log({ inView });
+  const ComRes = useMemo(
+    () => (
+      <>
         {router_lists.map((router) => (
           <NavLink
             key={router.id}
@@ -91,24 +97,64 @@ export default function Header_Nav() {
               `${styles["navlink"]} ${isActive ? styles["navlink-active"] : ""}`
             }
           >
-            <Chip label={router.name} clickable />
+            <Chip
+              className={styles["navstack-filter-tag"]}
+              label={router.name}
+              clickable
+            />
           </NavLink>
         ))}
         {nav_lists.map((nav) => (
           <ClickChip key={nav.id} label={nav.query} />
         ))}
+      </>
+    ),
+    []
+  );
+  return (
+    <div className={styles["nav"]}>
+      <Stack
+        direction='row'
+        alignItems='center'
+        className={`${styles["navstack"]}`}
+        style={{
+          display: showed ? "grid" : "flex",
+        }}
+        data-showed={showed}
+      >
+        {ComRes}
+        <span
+          ref={ref}
+          style={{
+            margin: 0,
+            width: "1px",
+          }}
+        ></span>
+        <div
+          className={styles["nav-right-show-btn"]}
+          onClick={() => setShow((showed) => !showed)}
+          style={{
+            display: inView ? "none" : "flex",
+          }}
+        >
+          <SegmentIcon fontSize='medium' />
+        </div>
       </Stack>
-    </>
+    </div>
   );
 }
 
 const ClickChip: FC<{ label: string }> = (props) => {
   const [clicked, setClick] = useState<boolean>(false);
   return (
+    //@ts-ignore
     <Chip
+      className={styles["navstack-filter-tag"]}
       {...props}
       color={clicked ? "info" : "default"}
       onClick={() => setClick((clicked) => !clicked)}
     />
   );
 };
+//todo：修复展示更多栏的bug
+//todo：改造nav栏，通过拖拽修改排序
diff --git a/src/routers/video/index.tsx b/src/routers/video/index.tsx
@@ -1,9 +1,4 @@
 import VideoMasonry from "./masonry";
 export default function VideoPage() {
-  return (
-    <>
-      <h1>videopage</h1>
-      <VideoMasonry />
-    </>
-  );
+  return <>{/* <VideoMasonry /> */}</>;
 }
diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less
@@ -126,7 +126,7 @@
                         text-overflow: ellipsis;
                         word-break: break-all;
 
-                        &:not(:last-of-type):after {
+                        &:not(:first-of-type)::before {
                             content: '·';
                             margin: 0 4px;
                         }