better sizing instructions for nav on mobile
This commit is contained in:
parent
a0392628a0
commit
87ffe8a308
1 changed files with 3 additions and 2 deletions
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue