fix: sponsor button on mobile and menus/logo

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

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>
   );
 };
 

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;

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) ? (

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} />
           ))}