src/assets/css/constants.scss

@@ -2,4 +2,7 @@ $main-color: #00D4FF;
 $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;
-$focus-color: #DDDDDD
+$focus-color: #DDDDDD;
+$border-color: rgba(204, 204, 204, 0.33);
+$url-color: rgba(102, 102, 102, .8);
+$url-active-color: #ccc

src/assets/css/pages/header.scss

@@ -1,4 +1,5 @@
 @use "@/assets/css/mixins" as mixins;
+@use "@/assets/css/constants" as constants;
 
 .nav {
   display: flex;
@@ -13,7 +14,7 @@
     bottom: {
       width: 1px;
       style: solid;
-      color: rgba(204, 204, 204, .33);
+      color: constants.$border-color;
     }
   }
   animation: .5s ease both;
@@ -58,7 +59,7 @@
 
         a {
           padding: 5px 20px;
-          color: rgba(102, 102, 102, .8);
+          color: constants.$url-color;
         }
       }
 
@@ -67,7 +68,7 @@
           bottom: {
             width: 2px;
             style: solid;
-            color: #CCC;
+            color: constants.$url-active-color;
           };
         };
       }
@@ -76,6 +77,77 @@
         transform: translateY(-5px);
       }
     }
+
+    .dropdown-menu-button {
+      display: none;
+      margin: 0 20px;
+      width: 45px;
+      height: 45px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 6px;
+    }
+
+    .dropdown-menu-button.active {
+      background-color: transparentize(constants.$focus-color, 0.8);
+      border: {
+        width: 1px;
+        color: constants.$focus-color;
+        style: solid;
+      };
+    }
+
+    @media screen and (max-width: 900px) {
+      .menu {
+        display: none;
+      }
+
+      .dropdown-menu-button {
+        display: flex;
+      }
+    }
+  }
+}
+
+.dropdown-menu-content {
+  display: none;
+
+  @media screen and (max-width: 900px) {
+    display: none;
+    position: fixed;
+    width: 100%;
+    top: 70px;
+    border: {
+      width: 1px;
+      color: constants.$border-color;
+      style: solid;
+    };
+    background-color: white;
+    z-index: 1;
+
+    ul {
+      li {
+        font-size: 1.2em;
+        text-align: center;
+
+        a {
+          display: block;
+          width: 100%;
+          height: 100%;
+          padding: 10px;
+        }
+
+        :hover {
+          background-color: constants.$focus-color;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 900px){
+  .dropdown-menu-content.show {
+    display: block;
   }
 }
 

src/assets/svg/menu.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M950.784 768v72.704q0 15.36-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264t-11.264-25.6V768q0-15.36 11.264-25.6t25.6-11.264h803.84q15.36 0 26.624 11.264t10.24 25.6z m0-292.864v73.728q0 14.336-10.24 25.6t-26.624 10.24H110.08q-15.36 0-25.6-10.24t-11.264-25.6v-73.728q0-14.336 11.264-25.6t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 25.6z m0-291.84V256q0 14.336-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264T73.216 256V183.296q0-15.36 11.264-26.624t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 26.624z" /></svg>

src/components/home/index.tsx

@@ -11,6 +11,7 @@ const Home: React.FC = () => {
     const {
         hideScrollbarRef,
         navbarHiddenState: { navbarHidden, setNavbarHidden },
+        showDropdownMenuState: {setShowDropdownMenu},
         preventScrollState: { setPreventScroll }
     } = useContext(MainFrameworkContext)
 
@@ -37,6 +38,7 @@ const Home: React.FC = () => {
 
     const handleScrollToContent = (index: number) => {
         return () => {
+            setShowDropdownMenu(false)
             if (!index) {
                 setNavbarHidden(true)
                 hideScrollbarRef.current?.scrollY(0)

src/constants/Common.constants.ts

@@ -1,4 +1,4 @@
-const PRODUCTION_NAME = 'Pinnacle OA'
+const PRODUCTION_NAME = 'FatWeb'
 const TOKEN_NAME = 'JWT_TOKEN'
 const COLOR_PRODUCTION = '#00D4FF'
 const COLOR_BACKGROUND = '#F5F5F5'

src/pages/MainFramework.tsx

@@ -3,6 +3,8 @@ import '@/assets/css/pages/header.scss'
 import router from '@/router'
 import LoadingMask from '@/components/common/LoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
+import Icon from '@ant-design/icons'
+import { COLOR_FONT_SECONDARY } from '@/constants/Common.constants.ts'
 
 export const MainFrameworkContext = createContext<{
     navbarHiddenState: {
@@ -21,6 +23,10 @@ export const MainFrameworkContext = createContext<{
         showHorizontalScrollbar: boolean
         setShowHorizontalScrollbar: (newValue: boolean) => void
     }
+    showDropdownMenuState: {
+        showDropdownMenu: boolean
+        setShowDropdownMenu: (newValue: boolean) => void
+    }
     hideScrollbarRef: React.RefObject<HideScrollbarElement>
 }>({
     navbarHiddenState: {
@@ -39,6 +45,10 @@ export const MainFrameworkContext = createContext<{
         showHorizontalScrollbar: false,
         setShowHorizontalScrollbar: () => undefined
     },
+    showDropdownMenuState: {
+        showDropdownMenu: false,
+        setShowDropdownMenu: () => undefined
+    },
     hideScrollbarRef: createRef()
 })
 
@@ -54,11 +64,16 @@ const MainFramework: React.FC = () => {
     const [preventScroll, setPreventScroll] = useState(false)
     const [showVerticalScrollbar, setShowVerticalScrollbar] = useState(false)
     const [showHorizontalScrollbar, setShowHorizontalScrollbar] = useState(false)
+    const [showDropdownMenu, setShowDropdownMenu] = useState(false)
 
     useEffect(() => {
         setNavbarHidden(false)
     }, [pathname])
 
+    const handleMenuDropdownButtonClick = () => {
+        setShowDropdownMenu(!showDropdownMenu)
+    }
+
     return (
         <>
             <HideScrollbar
@@ -67,12 +82,49 @@ const MainFramework: React.FC = () => {
                 isShowHorizontalScrollbar={true}
             >
                 <div className={'body'}>
+                    <div>
                         <header className={'nav' + (navbarHidden ? ' hide' : '')}>
                             <a className={'logo'} href={'https://fatweb.top'}>
                                 <span className={'title'}>FatWeb</span>
                             </a>
                             <nav>
                                 <ul className={'menu'}>
+                                    {routeChildren?.map((route) => {
+                                        return (
+                                            <li className={'item'} key={route.id}>
+                                                <NavLink
+                                                    to={route.path ?? ''}
+                                                    className={({ isActive, isPending }) =>
+                                                        isPending
+                                                            ? 'pending'
+                                                            : isActive
+                                                            ? 'active'
+                                                            : ''
+                                                    }
+                                                >
+                                                    {(route.handle as RouteHandle).name}
+                                                </NavLink>
+                                            </li>
+                                        )
+                                    })}
+                                </ul>
+                                <div
+                                    className={
+                                        'dropdown-menu-button' + (showDropdownMenu ? ' active' : '')
+                                    }
+                                >
+                                    <Icon
+                                        component={IconFatwebMenu}
+                                        style={{ fontSize: '2.6em', color: COLOR_FONT_SECONDARY }}
+                                        onClick={handleMenuDropdownButtonClick}
+                                    />
+                                </div>
+                            </nav>
+                        </header>
+                        <div
+                            className={'dropdown-menu-content' + (showDropdownMenu ? ' show' : '')}
+                        >
+                            <ul>
                                 {routeChildren?.map((route) => {
                                     return (
                                         <li className={'item'} key={route.id}>
@@ -88,8 +140,8 @@ const MainFramework: React.FC = () => {
                                     )
                                 })}
                             </ul>
-                        </nav>
-                    </header>
+                        </div>
+                    </div>
 
                     <MainFrameworkContext.Provider
                         value={{
@@ -103,6 +155,10 @@ const MainFramework: React.FC = () => {
                                 showHorizontalScrollbar,
                                 setShowHorizontalScrollbar
                             },
+                            showDropdownMenuState: {
+                                showDropdownMenu,
+                                setShowDropdownMenu
+                            },
                             hideScrollbarRef
                         }}
                     >