docs: 📝 improve responsive styles

Dan6erbond · May 21, 2023 · fee9856 · fee9856
1 parent c51eb02
commit fee9856
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 19 deletions.
diff --git a/docs/src/components/layout/footer.tsx b/docs/src/components/layout/footer.tsx
@@ -1,9 +1,32 @@
-import { Anchor, Footer, Group, Stack, Text, Title } from "@mantine/core";
+import {
+  Anchor,
+  Footer,
+  Group,
+  Stack,
+  Text,
+  Title,
+  em,
+  getBreakpointValue,
+  rem,
+} from "@mantine/core";
 import Link from "next/link";
 
 function DocsFooter() {
   return (
-    <Footer height={136} p="md">
+    <Footer
+      height={136}
+      p="md"
+      sx={(theme) => ({
+        [`@media (max-width: ${em(
+          getBreakpointValue(theme.breakpoints.sm) - 1
+        )})`]: {
+          position: "revert",
+          height: "auto",
+          maxHeight: "none",
+          padding: rem(16),
+        },
+      })}
+    >
       <Stack>
         <Group sx={{ justifyContent: "space-around" }}>
           <Stack>

diff --git a/docs/src/components/layout/header.tsx b/docs/src/components/layout/header.tsx
@@ -18,13 +18,19 @@ import lunr from "lunr";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
 import { FaGithub } from "react-icons/fa";
+import { TbHome } from "react-icons/tb";
 
 interface DocsHeaderProps {
   navbarOpen?: boolean;
   toggleNavbar?: () => void;
+  withDocsLink?: boolean;
 }
 
-function DocsHeader({ navbarOpen, toggleNavbar }: DocsHeaderProps) {
+function DocsHeader({
+  navbarOpen,
+  toggleNavbar,
+  withDocsLink,
+}: DocsHeaderProps) {
   const theme = useMantineTheme();
 
   const idx = useRef<lunr.Index | null>(null);
@@ -45,45 +51,119 @@ function DocsHeader({ navbarOpen, toggleNavbar }: DocsHeaderProps) {
   return (
     <Header height={74}>
       <Group h="100%" px="md">
-        {navbarOpen && toggleNavbar && (
+        {navbarOpen !== undefined && toggleNavbar && (
           <MediaQuery largerThan="sm" styles={{ display: "none" }}>
             <Burger
               opened={navbarOpen}
               onClick={toggleNavbar}
               size="sm"
               color={theme.colors.gray[6]}
-              mr="xl"
             />
           </MediaQuery>
         )}
 
-        <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
+        <MediaQuery smallerThan="md" styles={{ display: "none" }}>
           <Anchor
             unstyled
             component={Link}
             href="/"
             sx={{ ":hover": { color: theme.colors.gray[5] } }}
           >
-            <Title order={1}>Share Me</Title>
+            <Title order={1} size="h2">
+              Share Me
+            </Title>
           </Anchor>
         </MediaQuery>
+        <MediaQuery largerThan="md" styles={{ display: "none" }}>
+          <ActionIcon size="xl" component={Link} href="/">
+            <TbHome size={24} />
+          </ActionIcon>
+        </MediaQuery>
+
+        {withDocsLink && (
+          <>
+            <MediaQuery smallerThan="md" styles={{ display: "none" }}>
+              <Group>
+                <Anchor
+                  component={Link}
+                  href="/installation"
+                  unstyled
+                  py="md"
+                  px="sm"
+                  size="lg"
+                  ml="xl"
+                  sx={{ ":hover": { color: theme.colors.dark[2] } }}
+                >
+                  Installation
+                </Anchor>
+                <Anchor
+                  component={Link}
+                  href="/configuration"
+                  unstyled
+                  py="md"
+                  px="sm"
+                  size="lg"
+                  sx={{ ":hover": { color: theme.colors.dark[2] } }}
+                >
+                  Configuration
+                </Anchor>
+                <Anchor
+                  component={Link}
+                  href="/authentication"
+                  unstyled
+                  py="md"
+                  px="sm"
+                  size="lg"
+                  sx={{ ":hover": { color: theme.colors.dark[2] } }}
+                >
+                  Authentication
+                </Anchor>
+                <Anchor
+                  component={Link}
+                  href="/integrations/api-keys"
+                  unstyled
+                  py="md"
+                  px="sm"
+                  size="lg"
+                  sx={{ ":hover": { color: theme.colors.dark[2] } }}
+                >
+                  Integrations
+                </Anchor>
+              </Group>
+            </MediaQuery>
+            <MediaQuery largerThan="md" styles={{ display: "none" }}>
+              <Anchor
+                component={Link}
+                href="/installation"
+                unstyled
+                size="lg"
+                sx={{ ":hover": { color: theme.colors.dark[2] } }}
+              >
+                Installation
+              </Anchor>
+            </MediaQuery>
+          </>
+        )}
 
         <Box sx={{ flex: 1, width: "auto" }} />
-        <ActionIcon
-          size="xl"
-          component="a"
-          href="https://github.com/Dan6erbond/share-me/"
-          target="_blank"
-        >
-          <FaGithub size={24} />
-        </ActionIcon>
+        <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
+          <ActionIcon
+            size="xl"
+            component="a"
+            href="https://github.com/Dan6erbond/share-me/"
+            target="_blank"
+          >
+            <FaGithub size={24} />
+          </ActionIcon>
+        </MediaQuery>
         <Popover width={400} position="bottom-end">
           <Popover.Target>
             <TextInput
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               radius="xl"
               placeholder="Search..."
+              w={{ base: 150, sm: 250 }}
             />
           </Popover.Target>
           <Popover.Dropdown p={0}>

diff --git a/docs/src/components/layout/index.tsx b/docs/src/components/layout/index.tsx
@@ -1,14 +1,28 @@
-import { AppShell } from "@mantine/core";
+import { AppShell, em, getBreakpointValue, rem } from "@mantine/core";
 import DocsFooter from "./footer";
 import DocsHeader from "./header";
 
 interface LayoutProps {
   children: React.ReactNode;
+  withDocsLink?: boolean;
 }
 
-function Layout({ children }: LayoutProps) {
+function Layout({ children, withDocsLink }: LayoutProps) {
   return (
-    <AppShell padding="md" header={<DocsHeader />} footer={<DocsFooter />}>
+    <AppShell
+      styles={(theme) => ({
+        main: {
+          [`@media (max-width: ${em(
+            getBreakpointValue(theme.breakpoints.sm) - 1
+          )})`]: {
+            paddingBottom: rem(1),
+          },
+        },
+      })}
+      padding="md"
+      header={<DocsHeader withDocsLink={withDocsLink} />}
+      footer={<DocsFooter />}
+    >
       {children}
     </AppShell>
   );

diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -18,7 +18,7 @@ export default function Home() {
   const theme = useMantineTheme();
 
   return (
-    <Layout>
+    <Layout withDocsLink>
       <Box
         sx={(theme) => ({
           background: theme.fn.linearGradient(