From 7f91c7253ad071f1948644510544b469757ddc95 Mon Sep 17 00:00:00 2001
From: Daniel Lautzenheiser <lautzd@gmail.com>
Date: Tue, 31 Jan 2023 10:42:15 -0500
Subject: [PATCH] fix: sponsor button on mobile and menus/logo

---
 .../docs/src/components/layout/Header.tsx     | 21 ++++++--------
 packages/docs/src/components/layout/Logo.tsx  | 21 ++++++++++++--
 .../src/components/layout/SponsorButton.tsx   | 29 +++++++++++++++++++
 .../layout/mobile-drawer/MobileNavItem.tsx    |  1 +
 .../layout/mobile-drawer/NavigationDrawer.tsx | 10 +++++--
 5 files changed, 65 insertions(+), 17 deletions(-)
 create mode 100644 packages/docs/src/components/layout/SponsorButton.tsx

diff --git a/packages/docs/src/components/layout/Header.tsx b/packages/docs/src/components/layout/Header.tsx
index 536fb947..092beca2 100644
--- a/packages/docs/src/components/layout/Header.tsx
+++ b/packages/docs/src/components/layout/Header.tsx
@@ -1,6 +1,5 @@
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
-import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import MenuIcon from '@mui/icons-material/Menu';
 import AppBar from '@mui/material/AppBar';
@@ -14,6 +13,7 @@ import { useCallback, useMemo, useState } from 'react';
 import Logo from './Logo';
 import NavigationDrawer from './mobile-drawer/NavigationDrawer';
 import Search from './search/Search';
+import SponsorButton from './SponsorButton';
 
 import type { PaletteMode } from '@mui/material';
 import type { ButtonTypeMap } from '@mui/material/Button';
@@ -178,6 +178,13 @@ const Header = ({ mode, docsGroups, searchablePages, toggleColorMode }: HeaderPr
             <IconButton href="https://github.com/StaticJsCMS/static-cms" color="inherit">
               <GitHubIcon />
             </IconButton>
+            <SponsorButton
+              sx={{
+                display: 'none',
+                marginLeft: '8px',
+                [theme.breakpoints.only('md')]: { display: 'inline-flex' },
+              }}
+            />
           </StyledIconsWrapper>
           {items.map(item => {
             let url = '#';
@@ -196,17 +203,7 @@ const Header = ({ mode, docsGroups, searchablePages, toggleColorMode }: HeaderPr
           {/*
             <StyledDesktopLink component={Link} href="/blog">Blog</StyledDesktopLink>
           */}
-          <Button
-            component="a"
-            variant="outlined"
-            color={mode === 'dark' ? 'secondary' : 'inherit'}
-            href="https://github.com/sponsors/StaticJsCMS"
-            title="Sponsor StaticJsCMS"
-            startIcon={<FavoriteBorderIcon />}
-            sx={{ marginRight: '16px' }}
-          >
-            Sponsor
-          </Button>
+          <SponsorButton sx={{ [theme.breakpoints.down('lg')]: { display: 'none' } }} />
         </StyledToolbar>
       </StyledAppBar>
       <NavigationDrawer
diff --git a/packages/docs/src/components/layout/Logo.tsx b/packages/docs/src/components/layout/Logo.tsx
index 82c3f19a..efc2fc3c 100644
--- a/packages/docs/src/components/layout/Logo.tsx
+++ b/packages/docs/src/components/layout/Logo.tsx
@@ -2,6 +2,19 @@ import { styled } from '@mui/material/styles';
 import Image from 'next/image';
 import Link from 'next/link';
 
+const StyledLogoWrapper = styled('div')(
+  ({ theme }) => `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    ${theme.breakpoints.only('md')} {
+      position: absolute;
+      left: 0;
+      width: 100%;
+    }
+  `,
+);
+
 const StyledImageLink = styled(Link)`
   display: flex;
   align-items: center;
@@ -13,9 +26,11 @@ const StyledImage = styled(Image)`
 
 const Logo = () => {
   return (
-    <StyledImageLink href="/">
-      <StyledImage src="/static-cms-logo.svg" alt="Static CMS" width={182} height={72} />
-    </StyledImageLink>
+    <StyledLogoWrapper>
+      <StyledImageLink href="/">
+        <StyledImage src="/static-cms-logo.svg" alt="Static CMS" width={182} height={72} />
+      </StyledImageLink>
+    </StyledLogoWrapper>
   );
 };
 
diff --git a/packages/docs/src/components/layout/SponsorButton.tsx b/packages/docs/src/components/layout/SponsorButton.tsx
new file mode 100644
index 00000000..2f132367
--- /dev/null
+++ b/packages/docs/src/components/layout/SponsorButton.tsx
@@ -0,0 +1,29 @@
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import Button from '@mui/material/Button';
+import { useTheme } from '@mui/material/styles';
+
+import type { SxProps, Theme } from '@mui/material/styles';
+
+export interface SponsorButtonProps {
+  sx?: SxProps<Theme>;
+}
+
+const SponsorButton = ({ sx }: SponsorButtonProps) => {
+  const theme = useTheme();
+
+  return (
+    <Button
+      component="a"
+      variant="outlined"
+      color={theme.palette.mode === 'dark' ? 'secondary' : 'inherit'}
+      href="https://github.com/sponsors/StaticJsCMS"
+      title="Sponsor StaticJsCMS"
+      startIcon={<FavoriteBorderIcon />}
+      sx={sx}
+    >
+      Sponsor
+    </Button>
+  );
+};
+
+export default SponsorButton;
diff --git a/packages/docs/src/components/layout/mobile-drawer/MobileNavItem.tsx b/packages/docs/src/components/layout/mobile-drawer/MobileNavItem.tsx
index c6f4cc16..a5a5782a 100644
--- a/packages/docs/src/components/layout/mobile-drawer/MobileNavItem.tsx
+++ b/packages/docs/src/components/layout/mobile-drawer/MobileNavItem.tsx
@@ -64,6 +64,7 @@ const MobileNavItem = ({ item }: MobileNavItemProps) => {
         key={`drawer-nav-item-${item.title}`}
         onClick={handleOnClick(item)}
         selected={selected}
+        sx={{ display: 'flex', width: '100%' }}
       >
         <ListItemText primary={item.title} />
         {isMenuLinkGroup(item) ? (
diff --git a/packages/docs/src/components/layout/mobile-drawer/NavigationDrawer.tsx b/packages/docs/src/components/layout/mobile-drawer/NavigationDrawer.tsx
index 45372dea..09c643c6 100644
--- a/packages/docs/src/components/layout/mobile-drawer/NavigationDrawer.tsx
+++ b/packages/docs/src/components/layout/mobile-drawer/NavigationDrawer.tsx
@@ -1,11 +1,13 @@
+import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import List from '@mui/material/List';
 import { styled, useTheme } from '@mui/material/styles';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
 import { useMemo } from 'react';
 
-import MobileNavItem from './MobileNavItem';
 import Logo from '../Logo';
+import SponsorButton from '../SponsorButton';
+import MobileNavItem from './MobileNavItem';
 
 import type { MenuItem } from '../../../interface';
 
@@ -13,6 +15,9 @@ const DRAWER_WIDTH = 300;
 
 const StyledDrawerContents = styled('div')`
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 `;
 
 const StyledLogoWrapper = styled('div')(
@@ -46,8 +51,9 @@ const NavigationDrawer = ({ items, mobileOpen, onMobileOpenToggle }: NavigationD
         <StyledLogoWrapper key="drawer-nav-logo-wrapper">
           <Logo key="drawer-nav-logo" />
         </StyledLogoWrapper>
+        <SponsorButton sx={{ margin: '16px', marginTop: 0 }} />
         <Divider key="drawer-nav-divider" sx={{ borderColor: 'rgba(255, 255, 255, 0.8)' }} />
-        <List key="drawer-nav-list">
+        <List key="drawer-nav-list" sx={{ flexGrow: 1 }}>
           {items.map(item => (
             <MobileNavItem key={`drawer-nav-item-${item.title}`} item={item} />
           ))}