@cieloazul310/gatsby-theme-aoi-layout NPM

@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