fix: sponsor button on mobile and menus/logo
This commit is contained in:
parent
a7876d191e
commit
7f91c7253a
@ -1,6 +1,5 @@
|
|||||||
import Brightness4Icon from '@mui/icons-material/Brightness4';
|
import Brightness4Icon from '@mui/icons-material/Brightness4';
|
||||||
import Brightness7Icon from '@mui/icons-material/Brightness7';
|
import Brightness7Icon from '@mui/icons-material/Brightness7';
|
||||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
|
||||||
import GitHubIcon from '@mui/icons-material/GitHub';
|
import GitHubIcon from '@mui/icons-material/GitHub';
|
||||||
import MenuIcon from '@mui/icons-material/Menu';
|
import MenuIcon from '@mui/icons-material/Menu';
|
||||||
import AppBar from '@mui/material/AppBar';
|
import AppBar from '@mui/material/AppBar';
|
||||||
@ -14,6 +13,7 @@ import { useCallback, useMemo, useState } from 'react';
|
|||||||
import Logo from './Logo';
|
import Logo from './Logo';
|
||||||
import NavigationDrawer from './mobile-drawer/NavigationDrawer';
|
import NavigationDrawer from './mobile-drawer/NavigationDrawer';
|
||||||
import Search from './search/Search';
|
import Search from './search/Search';
|
||||||
|
import SponsorButton from './SponsorButton';
|
||||||
|
|
||||||
import type { PaletteMode } from '@mui/material';
|
import type { PaletteMode } from '@mui/material';
|
||||||
import type { ButtonTypeMap } from '@mui/material/Button';
|
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">
|
<IconButton href="https://github.com/StaticJsCMS/static-cms" color="inherit">
|
||||||
<GitHubIcon />
|
<GitHubIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
<SponsorButton
|
||||||
|
sx={{
|
||||||
|
display: 'none',
|
||||||
|
marginLeft: '8px',
|
||||||
|
[theme.breakpoints.only('md')]: { display: 'inline-flex' },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</StyledIconsWrapper>
|
</StyledIconsWrapper>
|
||||||
{items.map(item => {
|
{items.map(item => {
|
||||||
let url = '#';
|
let url = '#';
|
||||||
@ -196,17 +203,7 @@ const Header = ({ mode, docsGroups, searchablePages, toggleColorMode }: HeaderPr
|
|||||||
{/*
|
{/*
|
||||||
<StyledDesktopLink component={Link} href="/blog">Blog</StyledDesktopLink>
|
<StyledDesktopLink component={Link} href="/blog">Blog</StyledDesktopLink>
|
||||||
*/}
|
*/}
|
||||||
<Button
|
<SponsorButton sx={{ [theme.breakpoints.down('lg')]: { display: 'none' } }} />
|
||||||
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>
|
|
||||||
</StyledToolbar>
|
</StyledToolbar>
|
||||||
</StyledAppBar>
|
</StyledAppBar>
|
||||||
<NavigationDrawer
|
<NavigationDrawer
|
||||||
|
@ -2,6 +2,19 @@ import { styled } from '@mui/material/styles';
|
|||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import Link from 'next/link';
|
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)`
|
const StyledImageLink = styled(Link)`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -13,9 +26,11 @@ const StyledImage = styled(Image)`
|
|||||||
|
|
||||||
const Logo = () => {
|
const Logo = () => {
|
||||||
return (
|
return (
|
||||||
|
<StyledLogoWrapper>
|
||||||
<StyledImageLink href="/">
|
<StyledImageLink href="/">
|
||||||
<StyledImage src="/static-cms-logo.svg" alt="Static CMS" width={182} height={72} />
|
<StyledImage src="/static-cms-logo.svg" alt="Static CMS" width={182} height={72} />
|
||||||
</StyledImageLink>
|
</StyledImageLink>
|
||||||
|
</StyledLogoWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
29
packages/docs/src/components/layout/SponsorButton.tsx
Normal file
29
packages/docs/src/components/layout/SponsorButton.tsx
Normal file
@ -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;
|
@ -64,6 +64,7 @@ const MobileNavItem = ({ item }: MobileNavItemProps) => {
|
|||||||
key={`drawer-nav-item-${item.title}`}
|
key={`drawer-nav-item-${item.title}`}
|
||||||
onClick={handleOnClick(item)}
|
onClick={handleOnClick(item)}
|
||||||
selected={selected}
|
selected={selected}
|
||||||
|
sx={{ display: 'flex', width: '100%' }}
|
||||||
>
|
>
|
||||||
<ListItemText primary={item.title} />
|
<ListItemText primary={item.title} />
|
||||||
{isMenuLinkGroup(item) ? (
|
{isMenuLinkGroup(item) ? (
|
||||||
|
@ -1,11 +1,13 @@
|
|||||||
|
import Box from '@mui/material/Box';
|
||||||
import Divider from '@mui/material/Divider';
|
import Divider from '@mui/material/Divider';
|
||||||
import List from '@mui/material/List';
|
import List from '@mui/material/List';
|
||||||
import { styled, useTheme } from '@mui/material/styles';
|
import { styled, useTheme } from '@mui/material/styles';
|
||||||
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
|
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
|
|
||||||
import MobileNavItem from './MobileNavItem';
|
|
||||||
import Logo from '../Logo';
|
import Logo from '../Logo';
|
||||||
|
import SponsorButton from '../SponsorButton';
|
||||||
|
import MobileNavItem from './MobileNavItem';
|
||||||
|
|
||||||
import type { MenuItem } from '../../../interface';
|
import type { MenuItem } from '../../../interface';
|
||||||
|
|
||||||
@ -13,6 +15,9 @@ const DRAWER_WIDTH = 300;
|
|||||||
|
|
||||||
const StyledDrawerContents = styled('div')`
|
const StyledDrawerContents = styled('div')`
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledLogoWrapper = styled('div')(
|
const StyledLogoWrapper = styled('div')(
|
||||||
@ -46,8 +51,9 @@ const NavigationDrawer = ({ items, mobileOpen, onMobileOpenToggle }: NavigationD
|
|||||||
<StyledLogoWrapper key="drawer-nav-logo-wrapper">
|
<StyledLogoWrapper key="drawer-nav-logo-wrapper">
|
||||||
<Logo key="drawer-nav-logo" />
|
<Logo key="drawer-nav-logo" />
|
||||||
</StyledLogoWrapper>
|
</StyledLogoWrapper>
|
||||||
|
<SponsorButton sx={{ margin: '16px', marginTop: 0 }} />
|
||||||
<Divider key="drawer-nav-divider" sx={{ borderColor: 'rgba(255, 255, 255, 0.8)' }} />
|
<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 => (
|
{items.map(item => (
|
||||||
<MobileNavItem key={`drawer-nav-item-${item.title}`} item={item} />
|
<MobileNavItem key={`drawer-nav-item-${item.title}`} item={item} />
|
||||||
))}
|
))}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user