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

improve navbar on mobile

This commit is contained in:
keyan 2022-03-08 14:51:06 -06:00
parent a627322220
commit a7a72f0d2d
3 changed files with 59 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
components/header.js
View File

@ -34,7 +34,7 @@ export default function Header ({ sub }) {
<link rel='shortcut icon' href={me?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
</Head>
<div className='position-relative'>
<NavDropdown className='px-0' title={`@${me?.name}`} alignRight>
<NavDropdown className={styles.dropdown} title={`@${me?.name}`} alignRight>
<Link href={'/' + me?.name} passHref>
<NavDropdown.Item>
profile
@ -65,26 +65,6 @@ export default function Header ({ sub }) {
</div>}
</NavDropdown.Item>
</Link>
<div>
<NavDropdown.Divider />
<Link href={prefix + '/recent'} passHref>
<NavDropdown.Item>recent</NavDropdown.Item>
</Link>
{!prefix &&
<Link href='/top/posts/week' passHref>
<NavDropdown.Item>top</NavDropdown.Item>
</Link>}
{me
? (
<Link href={prefix + '/post'} passHref>
<NavDropdown.Item>post</NavDropdown.Item>
</Link>
)
: <NavDropdown.Item onClick={signIn}>post</NavDropdown.Item>}
<Link href='/~jobs' passHref>
<NavDropdown.Item active={sub === 'jobs'}>~jobs</NavDropdown.Item>
</Link>
</div>
<NavDropdown.Divider />
<div className='d-flex align-items-center'>
<Link href='/settings' passHref>
@ -126,54 +106,80 @@ export default function Header ({ sub }) {
return (
<>
<Container className='px-sm-0'>
<Navbar className='pb-1'>
<Navbar className='pb-0 pb-md-1'>
<Nav
className={styles.navbarNav}
activeKey={path}
>
<div className='d-flex'>
<Link href='/' passHref>
<Navbar.Brand className={`${styles.brand} d-none d-sm-block`}>
<Navbar.Brand className={`${styles.brand} d-none d-md-block`}>
STACKER NEWS
</Navbar.Brand>
</Link>
<Link href='/' passHref>
<Navbar.Brand className={`${styles.brand} d-block d-sm-none`}>
<Navbar.Brand className={`${styles.brand} d-block d-md-none`}>
SN
</Navbar.Brand>
</Link>
</div>
<Nav.Item className='d-md-flex d-none'>
<Nav.Item className='d-none d-md-flex'>
<Link href={prefix + '/recent'} passHref>
<Nav.Link className={styles.navLink}>recent</Nav.Link>
</Link>
</Nav.Item>
{!prefix &&
<Nav.Item className='d-md-flex d-none'>
<Nav.Item className='d-none d-md-flex'>
<Link href='/top/posts/week' passHref>
<Nav.Link className={styles.navLink}>top</Nav.Link>
</Link>
</Nav.Item>}
<Nav.Item className='d-md-flex d-none'>
{me
? (
<Link href={prefix + '/post'} passHref>
<Nav.Link className={styles.navLink}>post</Nav.Link>
</Link>
)
: <Nav.Link className={styles.navLink} onClick={signIn}>post</Nav.Link>}
</Nav.Item>
<Nav.Item className='d-md-flex d-none'>
<Nav.Item className='d-none d-md-flex'>
<Link href='/~jobs' passHref>
<Nav.Link active={sub === 'jobs'} className={styles.navLink}>~jobs</Nav.Link>
<Nav.Link active={sub === 'jobs'} className={styles.navLink}>jobs</Nav.Link>
</Link>
</Nav.Item>
<Nav.Item className='text-monospace nav-link'>
{me &&
<Nav.Item className='d-none d-md-flex'>
<Link href={prefix + '/post'} passHref>
<Nav.Link className={styles.navLinkButton}>post</Nav.Link>
</Link>
</Nav.Item>}
<Nav.Item className={`text-monospace nav-link px-0 ${me?.name.length > 6 ? 'd-none d-lg-flex' : ''}`}>
<Price />
</Nav.Item>
<Corner />
</Nav>
</Navbar>
<Navbar className='pt-0 pb-1 d-md-none'>
<Nav
className={styles.navbarNav}
activeKey={path}
>
<Nav.Item>
<Link href={prefix + '/recent'} passHref>
<Nav.Link className={styles.navLink}>recent</Nav.Link>
</Link>
</Nav.Item>
{!prefix &&
<Nav.Item>
<Link href='/top/posts/week' passHref>
<Nav.Link className={styles.navLink}>top</Nav.Link>
</Link>
</Nav.Item>}
<Nav.Item>
<Link href='/~jobs' passHref>
<Nav.Link active={sub === 'jobs'} className={styles.navLink}>jobs</Nav.Link>
</Link>
</Nav.Item>
{me &&
<Nav.Item>
<Link href={prefix + '/post'} passHref>
<Nav.Link className={styles.navLinkButton}>post</Nav.Link>
</Link>
</Nav.Item>}
</Nav>
</Navbar>
</Container>
</>
)

12
components/header.module.css
View File

@ -9,6 +9,10 @@
color: var(--theme-brandColor) !important;
}
.navLinkButton {
border: 2px solid;
border-radius: .4rem;
}
.navLink {
padding: 0.25rem 1rem;
@ -33,4 +37,12 @@
justify-content: space-between;
align-items: center;
height: 39px;
}
.dropdown {
padding: 0;
}
.dropdown > a {
padding-left: 0 !important;
}

6
components/price.js
View File

@ -65,7 +65,7 @@ export default function Price () {
if (asSats === 'yep') {
return (
<Button className='text-reset px-1 py-0' onClick={handleClick} variant='link'>
<Button className='text-reset p-0' onClick={handleClick} variant='link'>
{fixed(100000000 / price, 0) + ' sats/$'}
</Button>
)
@ -73,14 +73,14 @@ export default function Price () {
if (asSats === '1btc') {
return (
<Button className='text-reset px-1 py-0' onClick={handleClick} variant='link'>
<Button className='text-reset p-0' onClick={handleClick} variant='link'>
1sat=1sat
</Button>
)
}
return (
<Button className='text-reset px-1 py-0' onClick={handleClick} variant='link'>
<Button className='text-reset p-0' onClick={handleClick} variant='link'>
{'$' + fixed(price, 0)}
</Button>
)