1
0
Fork 0

better sizing instructions for nav on mobile

This commit is contained in:
Enoch Riese 2023-03-08 15:07:32 -06:00
parent a0392628a0
commit 87ffe8a308

View file

@ -3,16 +3,17 @@ import { MainSections, ActiveSection } from './primary.mjs'
export const AsideNavigation = ({ app, slug, mobileOnly = false, before = [], after = [] }) => ( export const AsideNavigation = ({ app, slug, mobileOnly = false, before = [], after = [] }) => (
<aside <aside
className={` className={`
fixed top-0 right-0 h-screen fixed top-0 right-0 h-screen w-screen
overflow-y-auto z-20 overflow-y-auto z-20
bg-base-100 text-base-content bg-base-100 text-base-content
${app.primaryMenu ? '' : 'translate-x-[-120%]'} transition-transform ${app.primaryMenu ? '' : 'translate-x-[-120%]'} transition-transform
px-6 pb-20 pt-8 shrink-0 px-6 pb-20 pt-8 shrink-0
lg:w-auto
lg:sticky lg:relative lg:transform-none lg:sticky lg:relative lg:transform-none
lg:justify-center lg:justify-center
lg:border-r-2 lg:border-base-200 lg:bg-base-200 lg:bg-opacity-50 lg:border-r-2 lg:border-base-200 lg:bg-base-200 lg:bg-opacity-50
${mobileOnly ? 'block lg:hidden' : ''} ${mobileOnly ? 'block lg:hidden w-full ' : ''}
`} `}
> >
<div> <div>