fix(docs): tablet view logo and menu button

packages/docs/src/components/layout/Header.tsx

@@ -66,6 +66,8 @@ const StyledGithubImage = styled('img')`
 
 const StyledMenuButton = styled(IconButton)(
   ({ theme }) => `
+    z-index: 30;
+
     ${theme.breakpoints.up('lg')} {
       visibility: hidden;
       height: 0;

packages/docs/src/components/layout/Logo.tsx

@@ -2,13 +2,19 @@ import { styled } from '@mui/material/styles';
 import Image from 'next/image';
 import Link from 'next/link';
 
-const StyledLogoWrapper = styled('div')(
-  ({ theme }) => `
+import type { FC } from 'react';
+
+interface StyledLogoWrapperProps {
+  inMenu: boolean;
+}
+
+const StyledLogoWrapper = styled('div')<StyledLogoWrapperProps>(
+  ({ theme, inMenu }) => `
     display: flex;
     align-items: center;
     justify-content: center;
     ${theme.breakpoints.only('md')} {
-      position: absolute;
+      position: ${inMenu ? 'relative' : 'absolute'};
       left: 0;
       width: 100%;
     }
@@ -24,9 +30,13 @@ const StyledImage = styled(Image)`
   cursor: pointer;
 `;
 
-const Logo = () => {
+export interface LogoProps {
+  inMenu?: boolean;
+}
+
+const Logo: FC<LogoProps> = ({ inMenu = false }) => {
   return (
-    <StyledLogoWrapper>
+    <StyledLogoWrapper inMenu={inMenu}>
       <StyledImageLink href="/">
         <StyledImage src="/static-cms-logo.svg" alt="Static CMS" width={182} height={72} />
       </StyledImageLink>

packages/docs/src/components/layout/mobile-drawer/NavigationDrawer.tsx

@@ -48,7 +48,7 @@ const NavigationDrawer = ({ items, mobileOpen, onMobileOpenToggle }: NavigationD
     () => (
       <StyledDrawerContents key="drawer-nav-contents" onClick={onMobileOpenToggle}>
         <StyledLogoWrapper key="drawer-nav-logo-wrapper">
-          <Logo key="drawer-nav-logo" />
+          <Logo key="drawer-nav-logo" inMenu />
         </StyledLogoWrapper>
         <SponsorButton sx={{ margin: '16px', marginTop: 0 }} />
         <Divider key="drawer-nav-divider" sx={{ borderColor: 'rgba(255, 255, 255, 0.8)' }} />