diff --git a/components/layouts/DocsLayout.js b/components/layouts/DocsLayout.js index 4a81f8df594..948439783a6 100644 --- a/components/layouts/DocsLayout.js +++ b/components/layouts/DocsLayout.js @@ -1,11 +1,14 @@ import { MDXProvider } from "@mdx-js/react"; import Head from "next/head"; - +import { useState } from "react"; import BreadCrumb from "@components/BreadCrumb"; import Page from "@components/Page"; import { ComponentStyle } from "@components/mdx/ComponentStyle"; import SideNav from "@components/navbar/SideNav"; import { PROJECT_NAME } from "@constants/index"; +import { HiOutlineMenuAlt3 } from "react-icons/hi"; +import SideDrawer from "@components/navbar/SideDrawer"; +import { IoMdClose } from "react-icons/io"; export const navigation = [ { @@ -23,7 +26,7 @@ export const navigation = [ }, { name: "Getting Started", - // icon: FolderIcon, + // icon: FolderDocumentationIcon, children: [ { name: "Editing with JSON", href: "/docs/how-to-guides/editing-json" }, { name: "Editing with Forms", href: "/docs/how-to-guides/editing-forms" }, @@ -126,6 +129,7 @@ export const navigation = [ ]; export default function DocsLayout({ children, title, section, name }) { + const [showSideNav, setShowSideNav] = useState(false); return ( <> @@ -140,7 +144,18 @@ export default function DocsLayout({ children, title, section, name }) {
- +
setShowSideNav(!showSideNav)} + > + { + showSideNav ? : + } +
+ { + showSideNav && + + } +
diff --git a/components/navbar/Navbar.js b/components/navbar/Navbar.js index c20200541a7..07e695ff50b 100644 --- a/components/navbar/Navbar.js +++ b/components/navbar/Navbar.js @@ -24,7 +24,21 @@ export default function Navbar() { const { data: session } = useSession(); const { systemTheme, theme, setTheme } = useTheme(); + + const [stickyClass, setStickyClass] = useState(false); + + function stickNavbar() { + let windowHeight = window.scrollY; + if (windowHeight > 80) { + console.log(windowHeight) + setStickyClass(true); + } else { + setStickyClass(false); + } + } + useEffect(() => { + window.addEventListener("scroll", stickNavbar); setMounted(true); }, []); @@ -137,7 +151,7 @@ export default function Navbar() { ); return ( -
+