split navigation to two separate components for desktop and mobile

src/components/App/index.tsx

@@ -49,7 +49,7 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                 header={(
                     <header>
                         <Navigation style={{
-                            // margin: "0 var(--size-m) var(--size-m)",
+                            padding: "var(--size-s)",
                         }} />
                         {hideBreadcrumbs || !props.breadcrumbs ? null : (
                             <Box style={blockStyle}>

src/components/Navigation/DesktopNavigation.tsx

@@ -0,0 +1,30 @@
+import { Menu } from "../Menu"
+import { useContext } from "react"
+import { ConfigContext } from "src/context/ConfigContext"
+import { Box } from "@/ui/Box"
+import { HudozkaLogo } from "../HudozkaLogo"
+import { useDarkTheme } from "@/hooks/useDarkTheme"
+import Link from "next/link"
+
+export type DesktopNavigationProps = {
+    style?: React.CSSProperties
+}
+
+export const DesktopNavigation: React.FC<DesktopNavigationProps> = ({ style }) => {
+    const dark = useDarkTheme()
+    const { menu } = useContext(ConfigContext)
+
+    return (
+        <Box wrap gap={"var(--size-s)"} style={style}>
+            <Link href="/">
+                <a>
+                    <HudozkaLogo dark={dark} />
+                </a>
+            </Link>
+
+            <Menu
+                items={menu}
+            />
+        </Box>
+    )
+}

src/components/Navigation/MobileNavigation.tsx

@@ -0,0 +1,64 @@
+import { MenuToggle } from "../MenuToggle"
+import { Menu } from "../Menu"
+import { Overlay } from "@/ui/Overlay"
+import { useContext } from "react"
+import { ConfigContext } from "src/context/ConfigContext"
+import { Box } from "@/ui/Box"
+import { Spacer } from "../Spacer"
+import { useToggle } from "react-use"
+import { HudozkaLogo } from "../HudozkaLogo"
+import { useDarkTheme } from "@/hooks/useDarkTheme"
+import { HudozkaTitle } from "../HudozkaTitle"
+import Link from "next/link"
+
+export type MobileNavigationProps = {
+    style?: React.CSSProperties
+}
+
+export const MobileNavigation: React.FC<MobileNavigationProps> = ({ style }) => {
+    const dark = useDarkTheme()
+    const [open, toggleOpen] = useToggle(false)
+    const { menu } = useContext(ConfigContext)
+
+    return (
+        <>
+            <Overlay
+                show={open}
+                onClickOverlay={toggleOpen}
+                // duration={250}
+                duration={0}
+            >
+                <Box style={{
+                    padding: "var(--size-s)",
+                }}>
+                    <Spacer />
+                    <MenuToggle
+                        open={open}
+                        onClick={toggleOpen}
+                    />
+                </Box>
+                <Box style={{
+                    justifyContent: "center",
+                }}>
+                    <Menu vertical
+                        items={menu}
+                    />
+                </Box>
+            </Overlay>
+
+            <Box wrap gap={"var(--size-s)"} style={style}>
+                <Link href="/">
+                    <a>
+                        <HudozkaLogo dark={dark} />
+                    </a>
+                </Link>
+                <HudozkaTitle compact />
+                <Spacer />
+                <MenuToggle
+                    open={open}
+                    onClick={toggleOpen}
+                />
+            </Box>
+        </>
+    )
+}

src/components/Navigation/index.tsx

@@ -1,84 +1,25 @@
-import { MenuToggle } from "../MenuToggle"
 import { useMobile } from "src/hooks/useMobile"
-import { Menu } from "../Menu"
-import { Overlay } from "@/ui/Overlay"
 import { useContext } from "react"
 import { ConfigContext } from "src/context/ConfigContext"
-import { Box } from "@/ui/Box"
-import { Spacer } from "../Spacer"
 import { useToggle } from "react-use"
-import { HudozkaLogo } from "../HudozkaLogo"
 import { useDarkTheme } from "@/hooks/useDarkTheme"
-import { HudozkaTitle } from "../HudozkaTitle"
-import Link from "next/link"
+import { DesktopNavigation } from "./DesktopNavigation"
+import { MobileNavigation } from "./MobileNavigation"
 
 export type NavigationProps = {
     style?: React.CSSProperties
 }
 
-export const Navigation: React.FC<NavigationProps> = props => {
+export const Navigation: React.FC<NavigationProps> = ({ style }) => {
     const mobile = useMobile()
-    const dark = useDarkTheme()
-    const [open, toggleOpen] = useToggle(false)
-    const { menu } = useContext(ConfigContext)
+
+    if (mobile) {
+        return (
+            <MobileNavigation style={style} />
+        )
+    }
 
     return (
-        <>
-            <Overlay
-                show={open}
-                onClickOverlay={toggleOpen}
-                // duration={250}
-                duration={0}
-            >
-                <Box style={{
-                    padding: "var(--size-s)",
-                }}>
-                    <Spacer />
-                    <MenuToggle
-                        open={open}
-                        onClick={toggleOpen}
-                    />
-                </Box>
-                <Box style={{
-                    justifyContent: "center",
-                }}>
-                    <Menu vertical
-                        items={menu}
-                    />
-                </Box>
-            </Overlay>
-
-            <Box wrap gap={"var(--size-s)"} style={{
-                padding: "var(--size-s)",
-            }}>
-                <Link href="/">
-                    <a>
-                        <HudozkaLogo dark={dark} />
-                    </a>
-                </Link>
-
-                {!mobile ? null : (
-                    <HudozkaTitle compact />
-                )}
-
-                {mobile ? null : (
-                    <Menu
-                        items={menu}
-                        onItemClick={() => {
-                            toggleOpen(false)
-                        }}
-                    />
-                )}
-
-                <Spacer />
-
-                {!mobile ? null : (
-                    <MenuToggle
-                        open={open}
-                        onClick={toggleOpen}
-                    />
-                )}
-            </Box>
-        </>
+        <DesktopNavigation style={style} />
     )
 }