💫 workflow(/layout): nav

add media query for responsive css

src/App.css

@@ -10,7 +10,7 @@
 div,
 span,
 a {
-    outline: 1px solid #00cec9;
+    /*outline: 1px solid #00cec9;*/
 }
 
 a,

src/layout/index.jsx

@@ -4,7 +4,7 @@
  */
 import { LayoutWrapper } from "./styles";
 import { useNavigate, Outlet, useLocation } from "react-router";
-import { Link } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import { useEffect, useState } from "react";
 import CustomLink from "../components/CustomeLink";
 
@@ -13,16 +13,25 @@ export default function Layout() {
 
     const [logoTransform, setLogoTransform] = useState(false);
 
+    const [showMenu, setShowMenu] = useState(false);
+
     const onMouseEnterAndLeave = () => setLogoTransform(!logoTransform);
 
+    const customeNavigate = (path) => {
+        setShowMenu(false);
+        navigate(path);
+    };
+
+    const onClickMenu = () => setShowMenu(!showMenu);
+
     return (
         <LayoutWrapper>
             <div className="layout">
                 <div className=" container header">
                     <header className="header-inner">
                         <h1
                             className="header-logo"
-                            onClick={() => navigate("/")}
+                            onClick={() => customeNavigate("/")}
                         >
                             <a className="header-logo__link">
                                 <span
@@ -48,9 +57,40 @@ export default function Layout() {
                                 </span>
                             </a>
                         </h1>
-                        <div className="header-nav">
-                            <CustomLink to="/projects">projects</CustomLink>
-                            <CustomLink to="/work">work</CustomLink>
+                        <figure
+                            className={[
+                                "header-menu",
+                                showMenu ? "header-menu--open" : null,
+                            ].join(" ")}
+                            onClick={onClickMenu}
+                        >
+                            <span className="header-menu__line"></span>
+                            <span className="header-menu__line"></span>
+                            <span className="header-menu__line"></span>
+                        </figure>
+                        <div
+                            className="header-nav"
+                            style={
+                                showMenu
+                                    ? {
+                                          opacity: 1,
+                                          PointerEvents: "none",
+                                      }
+                                    : null
+                            }
+                        >
+                            <CustomLink
+                                to="/projects"
+                                onClick={() => setShowMenu(false)}
+                            >
+                                projects
+                            </CustomLink>
+                            <CustomLink
+                                to="/work"
+                                onClick={() => setShowMenu(false)}
+                            >
+                                work
+                            </CustomLink>
                         </div>
                     </header>
                 </div>

src/layout/styles.js

@@ -58,9 +58,13 @@ export const LayoutWrapper = styled.div`
                     }
                 }
             }
+            .header-menu {
+                display: none;
+            }
             .header-nav {
                 flex: 0 0 auto;
                 font-family: Andale Mono;
+                font-weight: 300;
                 transition: all 0.25s;
 
                 > a {
@@ -118,5 +122,97 @@ export const LayoutWrapper = styled.div`
                 }
             }
         }
+
+        /* media query */
+        @media screen and (max-width: 768px) {
+            .header {
+                position: sticky;
+                top: 0;
+                margin-top: 0;
+                padding: 0;
+                z-index: 5;
+            }
+            .header-inner {
+                padding: 12px 24px;
+                -webkit-box-shadow: 0 0 5px #cbcbcb;
+                box-shadow: 0 0 5px #cbcbcb;
+                .header-logo {
+                }
+                .header-menu {
+                    position: relative;
+                    display: -webkit-box;
+                    display: -ms-flexbox;
+                    display: flex;
+                    flex-direction: column;
+                    align-self: center;
+                    width: 18px;
+                    z-index: 10;
+                    cursor: pointer;
+
+                    .header-menu__line:first-child {
+                        transform-origin: top left;
+                    }
+                    .header-menu__line:nth-child(3) {
+                        transform-origin: bottom left;
+                    }
+                    .header-menu__line:not(:last-child) {
+                        margin-bottom: 4px;
+                    }
+
+                    .header-menu__line {
+                        height: 2px;
+                        background: #666;
+                        transition: all 0.25s;
+                    }
+                }
+
+                .header-menu--open .header-menu__line {
+                    background-color: #f5a623 !important;
+                }
+                .header-menu--open .header-menu__line:first-child {
+                    transform: translateX(3px) rotate(45deg);
+                }
+                .header-menu--open .header-menu__line:nth-child(2) {
+                    opacity: 0;
+                }
+                .header-menu--open .header-menu__line:nth-child(3) {
+                    transform: translateX(3px) rotate(-45deg);
+                }
+
+                .header-nav {
+                    opacity: 0;
+                    position: fixed;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100vh;
+                    z-index: 5;
+                    background: #fff;
+                    > a:not(:last-child) {
+                        margin-bottom: 40px;
+                    }
+                }
+            }
+            .footer {
+                display: block;
+                text-align: center;
+
+                .footer-left {
+                    margin-bottom: 16px;
+                }
+                .footer-nav {
+                    .footer-nav__link {
+                        margin-bottom: 8px;
+                    }
+                    .footer-nav__link:first-of-type {
+                        margin-left: 0;
+                    }
+                }
+            }
+        }
     }
 `;

src/pages/projects/list/index.jsx

@@ -4,12 +4,19 @@
  */
 import { ProjectsListWrapper, ProjectItemWrapper } from "./styles";
 import { Link } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 export default function ProjectsList() {
+    const navigate = useNavigate();
+
+    const onClickProjectItem = (pid) => {
+        navigate(`/projects/${pid}`);
+    };
+
     return (
         <ProjectsListWrapper>
             <ProjectItemWrapper index={0}>
-                <div className="section">
+                <div className="section" onClick={() => onClickProjectItem(0)}>
                     <figure className="section-image">
                         <figure className="line line1"></figure>
                         <figure className="line line2"></figure>
@@ -32,7 +39,53 @@ export default function ProjectsList() {
                 </div>
             </ProjectItemWrapper>
             <ProjectItemWrapper index={1}>
-                <div className="section">
+                <div className="section" onClick={() => onClickProjectItem(1)}>
+                    <figure className="section-image">
+                        <figure className="line line1"></figure>
+                        <figure className="line line2"></figure>
+                    </figure>
+                    <div className="section-text">
+                        <h2 className="section-text__title">
+                            <span>
+                                tandem exchange
+                                <figure className="line line3"></figure>
+                            </span>
+                        </h2>
+                        <p className="section-text__description">
+                            A few years back, my brother was living in Berlin
+                            and learning German. After trying a bunch of
+                            different language learning tools and systems, he
+                            found that while traditional approaches like
+                            textbooks and tools like Rosetta Stone are good for…
+                        </p>
+                    </div>
+                </div>
+            </ProjectItemWrapper>
+            <ProjectItemWrapper index={2}>
+                <div className="section" onClick={() => onClickProjectItem(2)}>
+                    <figure className="section-image">
+                        <figure className="line line1"></figure>
+                        <figure className="line line2"></figure>
+                    </figure>
+                    <div className="section-text">
+                        <h2 className="section-text__title">
+                            <span>
+                                tandem exchange
+                                <figure className="line line3"></figure>
+                            </span>
+                        </h2>
+                        <p className="section-text__description">
+                            A few years back, my brother was living in Berlin
+                            and learning German. After trying a bunch of
+                            different language learning tools and systems, he
+                            found that while traditional approaches like
+                            textbooks and tools like Rosetta Stone are good for…
+                        </p>
+                    </div>
+                </div>
+            </ProjectItemWrapper>
+            <ProjectItemWrapper index={3}>
+                <div className="section" onClick={() => onClickProjectItem(3)}>
                     <figure className="section-image">
                         <figure className="line line1"></figure>
                         <figure className="line line2"></figure>

src/pages/projects/list/styles.js

@@ -8,13 +8,14 @@ import p1 from "../../../assets/images/p-1.jpg";
 export const ProjectsListWrapper = styled.div``;
 
 export const ProjectItemWrapper = styled.div.attrs(({ index }) => ({
-    isOdd: index % 2 === 0,
+    isEven: index % 2 === 0,
 }))`
     .section {
         display: flex;
         margin-bottom: 36px;
         text-decoration: none;
         color: inherit;
+        cursor: pointer;
 
         .line {
             position: absolute;
@@ -24,30 +25,32 @@ export const ProjectItemWrapper = styled.div.attrs(({ index }) => ({
 
         .line1 {
             top: -8px;
-            left: -8px;
+            right: ${({ isEven }) => (isEven ? "auto" : "-8px")};
+            left: ${({ isEven }) => (isEven ? "-8px" : "auto")};
             width: 100px;
             height: 1px;
         }
         .line2 {
             top: -8px;
-            left: -8px;
+            right: ${({ isEven }) => (isEven ? "auto" : "-8px")};
+            left: ${({ isEven }) => (isEven ? "-8px" : "auto")};
             width: 1px;
             height: 50px;
         }
 
         .line3 {
             bottom: -5px;
-            left: ${({ isOdd }) => (isOdd ? "-5px" : "0px")};
-            right: ${({ isOdd }) => (isOdd ? "0px" : "-5px")};
+            left: ${({ isEven }) => (isEven ? "auto" : "5px")};
+            right: ${({ isEven }) => (isEven ? "5px" : "auto")};
             width: 50px;
             height: 1px;
         }
 
         .section-image {
             margin-left: 0px;
-            margin-right: ${({ isOdd }) => (isOdd ? "16px" : "0px")};
-            margin-left: ${({ isOdd }) => (isOdd ? "0px" : "16px")};
-            order: ${({ isOdd }) => (isOdd ? 0 : 1)};
+            margin-right: ${({ isEven }) => (isEven ? "16px" : "0px")};
+            margin-left: ${({ isEven }) => (isEven ? "0px" : "16px")};
+            order: ${({ isEven }) => (isEven ? 0 : 1)};
             filter: none;
             background-color: rgb(243, 243, 243);
             background-image: url(${p1});
@@ -63,7 +66,7 @@ export const ProjectItemWrapper = styled.div.attrs(({ index }) => ({
         }
 
         .section-text {
-            text-align: ${({ isOdd }) => (isOdd ? "left" : "right")};
+            text-align: ${({ isEven }) => (isEven ? "left" : "right")};
             .section-text__title {
                 margin-bottom: 12px;
                 font-size: 20px;
@@ -97,4 +100,24 @@ export const ProjectItemWrapper = styled.div.attrs(({ index }) => ({
             width: 60px;
         }
     }
+
+    @media screen and (max-width: 768px) {
+        .section {
+            display: block;
+
+            .section-image {
+                width: 100%;
+                max-width: none;
+                height: 200px;
+                margin-left: 0 !important;
+                margin-right: 0 !important;
+            }
+            .section-text {
+                text-align: left !important;
+                .section-text__title {
+                    margin-top: 16px;
+                }
+            }
+        }
+    }
 `;

src/pages/work/index.jsx

@@ -7,7 +7,7 @@ import { WorkWrapper } from "./styles";
 export default function Work() {
     return (
         <WorkWrapper>
-            <h1>work</h1>
+            <p>fontend engineer</p>
         </WorkWrapper>
     );
 }

src/pages/work/styles.js

@@ -2,9 +2,14 @@
  * @Date: 2022-02-25
  * @Description:
  */
-import styledComponents from "styled-components";
-
-export const WorkWrapper = styledComponents.div`
+import styled from "styled-components";
 
+export const WorkWrapper = styled.div`
+    /*font-family: "Misans Normal";*/
+    font-size: 16px;
+    font-weight: 400;
 
+    .f3 {
+        font-family: "微软雅黑";
+    }
 `;