Add tools menu and submenu

src/pages/Home.tsx

@@ -0,0 +1,173 @@
+import React from 'react'
+import '@/assets/css/components/home/home.scss'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import { MainFrameworkContext } from '@/pages/MainFramework'
+import Slogan from '@/components/home/Slogan'
+import OxygenToolbox from '@/components/home/OxygenToolbox'
+import Indicator from '@/components/common/Indicator'
+import Footer from '@/components/home/Footer'
+
+const Home: React.FC = () => {
+    const {
+        hideScrollbarRef,
+        navbarHiddenState: { navbarHidden, setNavbarHidden },
+        showDropdownMenuState: { setShowDropdownMenu },
+        preventScrollState: { setPreventScroll }
+    } = useContext(MainFrameworkContext)
+
+    const fitFullScreenRef = useRef<HTMLDivElement>(null)
+    const scrollTimeout = useRef(0)
+    const clickStart = useRef(0)
+
+    const [currentContent, setCurrentContent] = useState(0)
+
+    useEffect(() => {
+        setTimeout(() => {
+            setNavbarHidden(true)
+            setPreventScroll(true)
+        })
+    }, [setNavbarHidden, setPreventScroll])
+
+    useLayoutEffect(() => {
+        const handleWindowResize = () => {
+            handleScrollToContent(currentContent)()
+        }
+        window.addEventListener('resize', handleWindowResize)
+        return () => window.removeEventListener('resize', handleWindowResize)
+    })
+
+    const handleScrollToContent = (index: number) => {
+        return () => {
+            setShowDropdownMenu(false)
+            if (!index) {
+                setNavbarHidden(true)
+                hideScrollbarRef.current?.scrollY(0)
+            } else {
+                hideScrollbarRef.current?.scrollY(
+                    (fitFullScreenRef.current?.offsetHeight ?? 0) * index
+                )
+                setNavbarHidden(false)
+            }
+        }
+    }
+
+    const handleScrollUp = () => {
+        if (currentContent <= 0) {
+            return
+        }
+        handleScrollToContent(currentContent - 1)()
+        clearTimeout(scrollTimeout.current)
+        scrollTimeout.current = setTimeout(() => {
+            setCurrentContent(currentContent - 1)
+        }, 500)
+    }
+
+    const handleScrollDown = () => {
+        if (currentContent >= content.length - 1) {
+            return
+        }
+        handleScrollToContent(currentContent + 1)()
+        clearTimeout(scrollTimeout.current)
+        scrollTimeout.current = setTimeout(() => {
+            setCurrentContent(currentContent + 1)
+        }, 500)
+    }
+
+    const handleWheel = (event: React.WheelEvent) => {
+        if (event.altKey || event.ctrlKey || event.shiftKey || event.deltaY === 0) {
+            return
+        }
+
+        if (event.deltaY > 0) {
+            handleScrollDown()
+        } else {
+            handleScrollUp()
+        }
+    }
+
+    const handleTouchStart = (event: React.TouchEvent) => {
+        clickStart.current = event.touches[0].clientY
+    }
+
+    const handleTouchEnd = (event: React.TouchEvent) => {
+        const moveLength = clickStart.current - event.changedTouches[0].clientY
+        if (Math.abs(moveLength) < 100) {
+            return
+        }
+
+        if (moveLength > 0) {
+            handleScrollDown()
+        } else {
+            handleScrollUp()
+        }
+    }
+
+    const handleMouseDown = (event: React.MouseEvent) => {
+        clickStart.current = event.clientY
+    }
+
+    const handleMouseUp = (event: React.MouseEvent) => {
+        const moveLength = clickStart.current - event.clientY
+        if (Math.abs(moveLength) < 100) {
+            return
+        }
+
+        if (moveLength > 0) {
+            handleScrollDown()
+        } else {
+            handleScrollUp()
+        }
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === 'ArrowUp') {
+            handleScrollUp()
+        }
+        if (event.key === 'ArrowDown') {
+            handleScrollDown()
+        }
+    }
+
+    const handleIndicatorSwitch = (index: number) => {
+        setCurrentContent(index)
+        handleScrollToContent(index)()
+    }
+
+    const content = [
+        {
+            backgroundColor: '#FBFBFB',
+            ref: fitFullScreenRef,
+            children: <Slogan onClickScrollDown={handleScrollDown} />
+        },
+        { children: <OxygenToolbox /> },
+        { children: <Footer /> }
+    ]
+
+    return (
+        <>
+            <div
+                tabIndex={0}
+                onWheel={handleWheel}
+                onTouchStart={handleTouchStart}
+                onTouchEnd={handleTouchEnd}
+                onMouseDown={handleMouseDown}
+                onMouseUp={handleMouseUp}
+                onKeyDown={handleKeyDown}
+            >
+                {content.map((element, index) => {
+                    return <FitFullScreen key={index} {...element} />
+                })}
+            </div>
+
+            <div hidden={navbarHidden} className={'indicator'}>
+                <Indicator
+                    total={content.length}
+                    current={currentContent}
+                    onSwitch={handleIndicatorSwitch}
+                />
+            </div>
+        </>
+    )
+}
+
+export default Home

src/pages/MainFramework.tsx

@@ -90,7 +90,7 @@ const MainFramework: React.FC = () => {
                             <nav>
                                 <ul className={'menu'}>
                                     {routeChildren?.map((route) => {
-                                        return (
+                                        return (route.handle as RouteHandle).menu ? (
                                             <li className={'item'} key={route.id}>
                                                 <NavLink
                                                     to={route.path ?? ''}
@@ -104,7 +104,32 @@ const MainFramework: React.FC = () => {
                                                 >
                                                     {(route.handle as RouteHandle).name}
                                                 </NavLink>
+                                                {route.children ? (
+                                                    <ul className={'submenu'}>
+                                                        {route.children.map((subRoute) => {
+                                                            return (subRoute.handle as RouteHandle)
+                                                                .menu ? (
+                                                                <li
+                                                                    className={'item'}
+                                                                    key={subRoute.id}
+                                                                >
+                                                                    {
+                                                                        (
+                                                                            subRoute.handle as RouteHandle
+                                                                        ).name
+                                                                    }
+                                                                </li>
+                                                            ) : (
+                                                                <></>
+                                                            )
+                                                        })}
+                                                    </ul>
+                                                ) : (
+                                                    <></>
+                                                )}
                                             </li>
+                                        ) : (
+                                            <></>
                                         )
                                     })}
                                 </ul>

src/pages/Tools.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Tools: React.FC = () => {
+    return <></>
+}
+
+export default Tools

src/pages/tools/Translation.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Translation: React.FC = () => {
+    return <></>
+}
+
+export default Translation