ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

match offcanvas nym position to navbar

This commit is contained in:
keyan 2024-03-28 18:57:42 -05:00
parent 9820055aee
commit ef5a92dff4
3 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/nav/mobile/footer.js
View File

@ -47,7 +47,7 @@ export default function BottomBar ({ sub }) {
} }
return ( return (
<div className={classNames('d-block d-md-none', styles.footer)}> <div className={classNames('d-block d-md-none', styles.footer, styles.footerPadding)}>
<Navbar className='container px-0'> <Navbar className='container px-0'>
<Nav className={styles.footerNav}> <Nav className={styles.footerNav}>
<Offcanvas me={me} {...props} /> <Offcanvas me={me} {...props} />

3
components/nav/mobile/footer.module.css
View File

@ -6,6 +6,9 @@
background-color: var(--bs-body-bg); background-color: var(--bs-body-bg);
border-top: 1px solid var(--theme-toolbarActive); border-top: 1px solid var(--theme-toolbarActive);
z-index: 1000; z-index: 1000;
}
.footerPadding {
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }

24
components/nav/mobile/offcanvas.js
View File

@ -6,6 +6,8 @@ import { useServiceWorker } from '@/components/serviceworker'
import { signOut } from 'next-auth/react' import { signOut } from 'next-auth/react'
import { LoginButtons, NavWalletSummary } from '../common' import { LoginButtons, NavWalletSummary } from '../common'
import AnonIcon from '@/svgs/spy-fill.svg' import AnonIcon from '@/svgs/spy-fill.svg'
import styles from './footer.module.css'
import classNames from 'classnames'
export default function OffCanvas ({ me, dropNavKey }) { export default function OffCanvas ({ me, dropNavKey }) {
const [show, setShow] = useState(false) const [show, setShow] = useState(false)
@ -94,16 +96,18 @@ export default function OffCanvas ({ me, dropNavKey }) {
</> </>
) )
: <LoginButtons />} : <LoginButtons />}
<Navbar className='container d-flex flex-row px-0 p-2 mt-auto text-muted'> <div className={classNames(styles.footerPadding, 'mt-auto')}>
<Nav> <Navbar className={classNames('container d-flex flex-row px-0 text-muted')}>
<Link href={`/${me?.name || 'anon'}`} className='d-flex flex-row p-2 mt-auto text-muted'> <Nav>
<MeImage /> <Link href={`/${me?.name || 'anon'}`} className='d-flex flex-row p-2 mt-auto text-muted'>
<div className='ms-2'> <MeImage />
@{me?.name || 'anon'} <div className='ms-2'>
</div> @{me?.name || 'anon'}
</Link> </div>
</Nav> </Link>
</Navbar> </Nav>
</Navbar>
</div>
</div> </div>
</Offcanvas.Body> </Offcanvas.Body>
</Offcanvas> </Offcanvas>