From 8bc5a2e2c0a1983a7850aa74043eb9f1bc5ae178 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Thu, 3 Nov 2022 12:31:06 -0230 Subject: [PATCH 1/4] Fix mobile menu toggle, add responsive nudges --- apps/docs/components/AuthProviders.tsx | 2 +- apps/docs/components/CodeBlock/CodeBlock.tsx | 2 +- apps/docs/components/Frameworks.tsx | 2 +- apps/docs/components/FunctionsExamples.tsx | 2 +- apps/docs/components/Navigation/NavBar.tsx | 20 +- apps/docs/components/Navigation/SideBar.tsx | 2 +- apps/docs/docs/guides/auth/auth-helpers.mdx | 2 +- apps/docs/docs/introduction.mdx | 2 +- apps/docs/layouts/Default.tsx | 8 +- apps/docs/styles/main.scss | 4 + package-lock.json | 1559 ++++++++++-------- 11 files changed, 861 insertions(+), 744 deletions(-) diff --git a/apps/docs/components/AuthProviders.tsx b/apps/docs/components/AuthProviders.tsx index f4f9197af3a..22bd59a19e2 100644 --- a/apps/docs/components/AuthProviders.tsx +++ b/apps/docs/components/AuthProviders.tsx @@ -3,7 +3,7 @@ import ButtonCard from './ButtonCard' export default function AuthProviders() { return ( -
+
{providers.map((x) => (
diff --git a/apps/docs/components/CodeBlock/CodeBlock.tsx b/apps/docs/components/CodeBlock/CodeBlock.tsx index 6733b465b54..7f4074f4717 100644 --- a/apps/docs/components/CodeBlock/CodeBlock.tsx +++ b/apps/docs/components/CodeBlock/CodeBlock.tsx @@ -62,7 +62,7 @@ function CodeBlock(props: Props) { { }, ] return ( -
+
{frameworks.map((x) => (
{ return ( -
+
{examples.map((x) => (
diff --git a/apps/docs/components/Navigation/NavBar.tsx b/apps/docs/components/Navigation/NavBar.tsx index f81fa2097da..8a2d2927e76 100644 --- a/apps/docs/components/Navigation/NavBar.tsx +++ b/apps/docs/components/Navigation/NavBar.tsx @@ -14,6 +14,7 @@ interface Props { const NavBar: FC = ({ currentPage }) => { const { isDarkMode, toggleTheme } = useTheme() const [mounted, setMounted] = useState(false) + const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const { asPath, push } = useRouter() const pathSegments = asPath.split('/') @@ -53,6 +54,19 @@ const NavBar: FC = ({ currentPage }) => { } } + const toggleMobileMenu = () => { + setMobileMenuOpen(!mobileMenuOpen) + const sidebar = document.querySelector('.sidebar-menu-container') + const contentPane = document.querySelector('.main-content-pane') + + sidebar.classList.toggle('hidden') + contentPane.classList.toggle('hidden') + } + + useEffect(() => { + if (mobileMenuOpen) toggleMobileMenu() + }, [asPath]) + return (