@cieloazul310/gatsby-theme-aoi-layout

A layout component for @cieloazul310/gatsby-theme-aoi

Layout component

import { Layout } from '@cieloazul310/gatsby-theme-aoi';

Main package @cieloazul310/gatsby-theme-aoi includes a following component.

<Layout>

LayoutProps

• children (Required): React.ReactNode
• title?: string
• description?: string
• keywords?: string[]
• image?: string
• loading?: boolean
• componentViewports?: Partial<ComponentViewports>
• drawerWidth?: number
• tabSticky?: boolean
• drawerContents?: React.ReactNode
• tabs?: React.ReactNode
• bottomNavigation?: React.ReactNode
• fab?: React.ReactNode

ComponentViewports

Component viewports is a configuration for <SwipeableDrawer> <PermanentDrawer> <BottomNavigation> <Fab> viewports.

| key | default | |-------------------|------------| | swipeableDrawer | "smDown" | | permanentDrawer | "mdUp" | | bottomNav | "xsDown" | | fab | "smDown" |

MUI breakpoints (ex. "smDown", "mdUp") or boolean

Shadowing components

.
├── BottomNav
│   └── index.tsx
├── DrawerInner
│   ├── Contents.tsx
│   ├── DrawerFooter.tsx
│   ├── DrawerSharer.tsx
│   ├── StateHandler.tsx
│   └── index.tsx
├── Fab
│   └── index.tsx
├── Footer
│   ├── Copyrights.tsx
│   ├── Socials.tsx
│   └── index.tsx
├── FooterMenu
│   └── index.tsx
├── Header
│   ├── ButtonLeft.tsx
│   ├── ButtonRight.tsx
│   ├── ShareButtons.tsx
│   └── index.tsx
├── SEO
│   └── index.tsx
├── TabContainer
│   └── index.tsx
├── index.tsx
└── menu.tsx

https://github.com/cieloazul310/gatsby-aoi/tree/main/packages/gatsby-theme-aoi-layout/src

Gatsby Theme Aoi packages

• @cieloazul310/gatsby-theme-aoi
• @cieloazul310/gatsby-theme-aoi-components
• @cieloazul310/gatsby-theme-aoi-layout
• @cieloazul310/gatsby-theme-aoi-top-layout
• @cieloazul310/gatsby-theme-aoi-utils

References

• Gatsby
• MUI
• gatsby-plugin-material-ui
• gatsby-theme-material-ui