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

user dropdown

This commit is contained in:
keyan 2021-04-28 16:30:32 -05:00
parent 6ea9ff7e11
commit eb329f4cae
2 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/header.js
View File

@ -4,7 +4,7 @@ import Nav from 'react-bootstrap/Nav'
import Link from 'next/link'
import styles from './header.module.css'
import { useRouter } from 'next/router'
import { Container } from 'react-bootstrap'
import { Container, NavDropdown } from 'react-bootstrap'
import Price from './price'
export default function Header () {
@ -18,16 +18,12 @@ export default function Header () {
if (session) {
return (
<>
<Nav.Item>
<NavDropdown eventKey={'/' + session.user.name} title={`@${session.user.name}`} alignRight>
<Link href={'/' + session.user.name} passHref>
<Nav.Link className={styles.navLink}>@{session.user.name}</Nav.Link>
<NavDropdown.Item>profile</NavDropdown.Item>
</Link>
</Nav.Item>
{/* <Nav.Item>
<Nav.Link onClick={signOut} className={styles.navLink}>logout</Nav.Link>
</Nav.Item> */}
</>
<NavDropdown.Item className='text-muted' onClick={signOut}>logout</NavDropdown.Item>
</NavDropdown>
)
} else {
return <Nav.Link href='/login' onClick={signIn}>login</Nav.Link>
@ -40,7 +36,10 @@ export default function Header () {
<Navbar className={styles.navbar}>
<Nav className='w-100 justify-content-sm-between justify-content-start flex-wrap align-items-center' activeKey={router.asPath.split('?')[0]}>
<Link href='/' passHref>
<Navbar.Brand className={`${styles.brand} mr-2 mr-sm-0`}>STACKER NEWS</Navbar.Brand>
<Navbar.Brand className={`${styles.brand} mr-2 d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
</Link>
<Link href='/' passHref>
<Navbar.Brand className={`${styles.brand} mr-2 d-block d-sm-none`}>SN</Navbar.Brand>
</Link>
<Nav.Item>
<Link href='/recent' passHref>

19
styles/globals.scss
View File

@ -32,6 +32,12 @@ $link-color: #007cbe;
$font-size-base: .9rem;
$enable-responsive-font-sizes: true;
$link-hover-decoration: none;
$dropdown-border-color: #ced4da;
$dropdown-link-active-color: inherit;
$dropdown-link-hover-bg: transparent;
$dropdown-link-active-bg: transparent;
$dropdown-link-color: rgba(0, 0, 0, 0.7);
$dropdown-link-hover-color: rgba(0, 0, 0, 0.9);
$container-max-widths: (
sm: 540px,
md: 720px,
@ -59,6 +65,19 @@ $container-max-widths: (
font-weight: 500;
}
.dropdown-toggle::after {
display: none;
}
.dropdown-item {
font-weight: 500;
}
.dropdown-item.active {
text-shadow: 0 0 10px #FADA5E;
}
.form-control:focus {
border-color: #fada5e;
}