2021-04-12 18:05:09 +00:00
|
|
|
import Navbar from 'react-bootstrap/Navbar'
|
|
|
|
|
import Nav from 'react-bootstrap/Nav'
|
|
|
|
|
import Link from 'next/link'
|
|
|
|
|
import styles from './header.module.css'
|
|
|
|
|
import { useRouter } from 'next/router'
|
2021-12-05 17:37:55 +00:00
|
|
|
import { Button, Container, NavDropdown } from 'react-bootstrap'
|
2021-04-28 19:30:14 +00:00
|
|
|
import Price from './price'
|
2021-05-25 00:08:56 +00:00
|
|
|
import { useMe } from './me'
|
2021-07-08 19:52:11 +00:00
|
|
|
import Head from 'next/head'
|
2023-01-10 00:33:44 +00:00
|
|
|
import { signOut } from 'next-auth/client'
|
2021-10-21 22:05:06 +00:00
|
|
|
import { useEffect, useState } from 'react'
|
2021-07-16 16:47:18 +00:00
|
|
|
import { randInRange } from '../lib/rand'
|
2022-10-25 21:35:32 +00:00
|
|
|
import { abbrNum } from '../lib/format'
|
2022-04-19 21:37:05 +00:00
|
|
|
import NoteIcon from '../svgs/notification-4-fill.svg'
|
2022-05-09 17:30:27 +00:00
|
|
|
import { useQuery, gql } from '@apollo/client'
|
2022-09-27 21:27:29 +00:00
|
|
|
import LightningIcon from '../svgs/bolt.svg'
|
2023-02-01 14:44:35 +00:00
|
|
|
import CowboyHat from './cowboy-hat'
|
2023-05-01 20:58:30 +00:00
|
|
|
import { Form, Select } from './form'
|
|
|
|
|
import SearchIcon from '../svgs/search-line.svg'
|
2023-05-31 22:28:33 +00:00
|
|
|
import BackArrow from '../svgs/arrow-left-line.svg'
|
2023-06-20 16:26:23 +00:00
|
|
|
import { SUBS } from '../lib/constants'
|
2023-07-05 14:47:44 +00:00
|
|
|
import { useLightning } from './lightning'
|
2021-11-12 22:39:52 +00:00
|
|
|
|
2021-06-24 23:56:01 +00:00
|
|
|
function WalletSummary ({ me }) {
|
2021-11-12 22:39:52 +00:00
|
|
|
if (!me) return null
|
|
|
|
|
|
2022-10-25 21:35:32 +00:00
|
|
|
return `${abbrNum(me.sats)}`
|
2021-05-11 15:52:50 +00:00
|
|
|
}
|
2021-03-25 19:29:24 +00:00
|
|
|
|
2023-05-31 22:28:33 +00:00
|
|
|
function Back () {
|
|
|
|
|
const router = useRouter()
|
2023-06-12 22:59:53 +00:00
|
|
|
const [show, setShow] = useState()
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setShow(typeof window !== 'undefined' && router.asPath !== '/' &&
|
|
|
|
|
(typeof window.navigation === 'undefined' || window.navigation.canGoBack === undefined || window?.navigation.canGoBack))
|
|
|
|
|
}, [router.asPath])
|
|
|
|
|
|
|
|
|
|
if (show) {
|
|
|
|
|
return <a role='button' tabIndex='0' className='nav-link standalone p-0' onClick={() => router.back()}><BackArrow className='theme mr-1 mr-md-2' width={22} height={22} /></a>
|
2023-05-31 22:28:33 +00:00
|
|
|
}
|
|
|
|
|
return null
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-17 17:23:43 +00:00
|
|
|
export default function Header ({ sub }) {
|
2021-04-12 18:05:09 +00:00
|
|
|
const router = useRouter()
|
2021-12-06 16:32:58 +00:00
|
|
|
const [fired, setFired] = useState()
|
2023-05-01 20:58:30 +00:00
|
|
|
const [topNavKey, setTopNavKey] = useState('')
|
|
|
|
|
const [dropNavKey, setDropNavKey] = useState('')
|
|
|
|
|
const [prefix, setPrefix] = useState('')
|
|
|
|
|
const [path, setPath] = useState('')
|
2021-06-24 23:56:01 +00:00
|
|
|
const me = useMe()
|
2023-05-01 20:58:30 +00:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// there's always at least 2 on the split, e.g. '/' yields ['','']
|
|
|
|
|
const path = router.asPath.split('?')[0]
|
|
|
|
|
setPrefix(sub ? `/~${sub}` : '')
|
|
|
|
|
setTopNavKey(path.split('/')[sub ? 2 : 1] ?? '')
|
|
|
|
|
setDropNavKey(path.split('/').slice(sub ? 2 : 1).join('/'))
|
|
|
|
|
setPath(path)
|
|
|
|
|
}, [sub, router.asPath])
|
|
|
|
|
|
|
|
|
|
// const { data: subLatestPost } = useQuery(gql`
|
|
|
|
|
// query subLatestPost($name: ID!) {
|
|
|
|
|
// subLatestPost(name: $name)
|
|
|
|
|
// }
|
|
|
|
|
// `, { variables: { name: 'jobs' }, pollInterval: 600000, fetchPolicy: 'network-only' })
|
2022-11-07 23:31:29 +00:00
|
|
|
const { data: hasNewNotes } = useQuery(gql`
|
|
|
|
|
{
|
|
|
|
|
hasNewNotes
|
|
|
|
|
}
|
2023-05-31 22:28:33 +00:00
|
|
|
`, {
|
|
|
|
|
pollInterval: 30000,
|
Service worker rework, Web Target Share API & Web Push API (#324)
* npm uninstall next-pwa
next-pwa was last updated in August 2022.
There is also an issue which mentions that next-pwa is abandoned (?): https://github.com/shadowwalker/next-pwa/issues/482
But the main reason for me uninstalling it is that it adds a lot of preconfigured stuff which is not necessary for us.
It even lead to a bug since pages were cached without our knowledge.
So I will go with a different PWA approach. This different approach should do the following:
- make it more transparent what the service worker is doing
- gives us more control to configure the service worker and thus making it easier
* Use workbox-webpack-plugin
Every other plugin (`next-offline`, `next-workbox-webpack-plugin`, `next-with-workbox`, ...) added unnecessary configuration which felt contrary to how PWAs should be built.
(PWAs should progressivly enhance the website in small steps, see https://web.dev/learn/pwa/getting-started/#focus-on-a-feature)
These default configurations even lead to worse UX since they made invalid assumptions about stacker.news:
We _do not_ want to cache our start url and we _do not_ want to cache anything unless explicitly told to.
Almost every page on SN should be fresh for the best UX.
To achieve this, by default, the service worker falls back to the network (as if the service worker wasn't there).
Therefore, this should be the simplest configuration with a valid precache and cache busting support.
In the future, we can try to use prefetching to improve performance of navigation requests.
* Add support for Web Share Target API
See https://developer.chrome.com/articles/web-share-target/
* Use Web Push API for push notifications
I followed this (very good!) guide: https://web.dev/notifications/
* Refactor code related to Web Push
* Send push notification to users on events
* Merge notifications
* Send notification to author of every parent recursively
* Remove unused userId param in savePushSubscription
As it should be, the user id is retrieved from the authenticated user in the backend.
* Resubscribe user if push subscription changed
* Update old subscription if oldEndpoint was given
* Allow users to unsubscribe
* Use LTREE operator instead of recursive query
* Always show checkbox for push notifications
* Justify checkbox to end
* Update title of first push notification
* Fix warning from uncontrolled to controlled
* Add comment about Notification.requestPermission
* Fix timestamp
* Catch error on push subscription toggle
* Wrap function bodies in try/catch
* Use Promise.allSettled
* Filter subscriptions by user notification settings
* Fix user notification filter
* Use skipWaiting
---------
Co-authored-by: ekzyis <ek@stacker.news>
2023-07-04 19:36:07 +00:00
|
|
|
fetchPolicy: 'cache-and-network'
|
2023-05-31 22:28:33 +00:00
|
|
|
})
|
2023-05-01 20:58:30 +00:00
|
|
|
// const [lastCheckedJobs, setLastCheckedJobs] = useState(new Date().getTime())
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// if (me) {
|
|
|
|
|
// setLastCheckedJobs(me.lastCheckedJobs)
|
|
|
|
|
// } else {
|
|
|
|
|
// if (sub === 'jobs') {
|
|
|
|
|
// localStorage.setItem('lastCheckedJobs', new Date().getTime())
|
|
|
|
|
// }
|
|
|
|
|
// setLastCheckedJobs(localStorage.getItem('lastCheckedJobs'))
|
|
|
|
|
// }
|
|
|
|
|
// }, [sub])
|
2021-10-21 22:05:06 +00:00
|
|
|
|
2021-04-12 18:05:09 +00:00
|
|
|
const Corner = () => {
|
2021-09-24 23:51:07 +00:00
|
|
|
if (me) {
|
2021-04-12 18:05:09 +00:00
|
|
|
return (
|
2023-05-03 00:22:23 +00:00
|
|
|
<div className='d-flex align-items-center ml-auto'>
|
2021-08-17 23:59:22 +00:00
|
|
|
<Head>
|
2022-11-07 23:31:29 +00:00
|
|
|
<link rel='shortcut icon' href={hasNewNotes?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
|
2021-08-17 23:59:22 +00:00
|
|
|
</Head>
|
2022-04-19 21:37:05 +00:00
|
|
|
<Link href='/notifications' passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<Nav.Link eventKey='notifications' className='pl-0 position-relative'>
|
2023-05-01 20:58:30 +00:00
|
|
|
<NoteIcon height={22} width={22} className='theme' />
|
2022-11-07 23:31:29 +00:00
|
|
|
{hasNewNotes?.hasNewNotes &&
|
2022-04-19 21:37:05 +00:00
|
|
|
<span className={styles.notification}>
|
|
|
|
|
<span className='invisible'>{' '}</span>
|
|
|
|
|
</span>}
|
|
|
|
|
</Nav.Link>
|
|
|
|
|
</Link>
|
2021-11-12 22:39:52 +00:00
|
|
|
<div className='position-relative'>
|
2022-05-24 21:15:51 +00:00
|
|
|
<NavDropdown
|
|
|
|
|
className={styles.dropdown} title={
|
2023-05-01 20:58:30 +00:00
|
|
|
<Nav.Link eventKey={me?.name} as='span' className='p-0 d-flex align-items-center' onClick={e => e.preventDefault()}>
|
2023-05-01 21:49:47 +00:00
|
|
|
{`@${me?.name}`}<CowboyHat user={me} />
|
2023-05-01 20:58:30 +00:00
|
|
|
</Nav.Link>
|
2022-05-24 21:15:51 +00:00
|
|
|
} alignRight
|
|
|
|
|
>
|
2021-09-24 23:43:30 +00:00
|
|
|
<Link href={'/' + me?.name} passHref>
|
2023-02-16 22:23:59 +00:00
|
|
|
<NavDropdown.Item active={me?.name === dropNavKey}>
|
2021-09-24 21:56:51 +00:00
|
|
|
profile
|
2022-04-28 18:11:05 +00:00
|
|
|
{me && !me.bioId &&
|
2021-09-24 21:56:51 +00:00
|
|
|
<div className='p-1 d-inline-block bg-secondary ml-1'>
|
|
|
|
|
<span className='invisible'>{' '}</span>
|
|
|
|
|
</div>}
|
|
|
|
|
</NavDropdown.Item>
|
2021-06-24 23:56:01 +00:00
|
|
|
</Link>
|
2023-02-16 22:23:59 +00:00
|
|
|
<Link href={'/' + me?.name + '/bookmarks'} passHref>
|
|
|
|
|
<NavDropdown.Item active={me?.name + '/bookmarks' === dropNavKey}>bookmarks</NavDropdown.Item>
|
|
|
|
|
</Link>
|
2021-06-24 23:56:01 +00:00
|
|
|
<Link href='/wallet' passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<NavDropdown.Item eventKey='wallet'>wallet</NavDropdown.Item>
|
2021-06-24 23:56:01 +00:00
|
|
|
</Link>
|
2022-04-19 21:37:05 +00:00
|
|
|
<Link href='/satistics?inc=invoice,withdrawal,stacked,spent' passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<NavDropdown.Item eventKey='satistics'>satistics</NavDropdown.Item>
|
2022-04-19 21:37:05 +00:00
|
|
|
</Link>
|
2021-10-14 21:05:37 +00:00
|
|
|
<NavDropdown.Divider />
|
2022-12-19 22:27:52 +00:00
|
|
|
<Link href='/referrals/month' passHref>
|
|
|
|
|
<NavDropdown.Item eventKey='referrals'>referrals</NavDropdown.Item>
|
2021-10-14 21:05:37 +00:00
|
|
|
</Link>
|
2021-05-06 21:15:22 +00:00
|
|
|
<NavDropdown.Divider />
|
2021-11-04 18:22:03 +00:00
|
|
|
<div className='d-flex align-items-center'>
|
|
|
|
|
<Link href='/settings' passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<NavDropdown.Item eventKey='settings'>settings</NavDropdown.Item>
|
2021-11-04 18:22:03 +00:00
|
|
|
</Link>
|
|
|
|
|
</div>
|
2021-10-30 16:20:11 +00:00
|
|
|
<NavDropdown.Divider />
|
2021-12-20 22:34:26 +00:00
|
|
|
<NavDropdown.Item onClick={() => signOut({ callbackUrl: '/' })}>logout</NavDropdown.Item>
|
2021-06-24 23:56:01 +00:00
|
|
|
</NavDropdown>
|
2022-04-28 18:11:05 +00:00
|
|
|
{me && !me.bioId &&
|
2022-04-19 21:37:05 +00:00
|
|
|
<span className='position-absolute p-1 bg-secondary' style={{ top: '5px', right: '0px' }}>
|
2021-09-24 21:56:51 +00:00
|
|
|
<span className='invisible'>{' '}</span>
|
|
|
|
|
</span>}
|
2021-06-24 23:56:01 +00:00
|
|
|
</div>
|
|
|
|
|
{me &&
|
|
|
|
|
<Nav.Item>
|
|
|
|
|
<Link href='/wallet' passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<Nav.Link eventKey='wallet' className='text-success px-0 text-nowrap'><WalletSummary me={me} /></Nav.Link>
|
2021-05-06 21:15:22 +00:00
|
|
|
</Link>
|
2021-06-24 23:56:01 +00:00
|
|
|
</Nav.Item>}
|
2021-05-05 18:13:14 +00:00
|
|
|
</div>
|
2021-04-12 18:05:09 +00:00
|
|
|
)
|
|
|
|
|
} else {
|
2021-12-06 16:32:58 +00:00
|
|
|
if (!fired) {
|
2023-07-05 14:47:44 +00:00
|
|
|
const strike = useLightning()
|
2021-12-06 16:32:58 +00:00
|
|
|
useEffect(() => {
|
2022-10-26 16:45:16 +00:00
|
|
|
let isMounted = true
|
|
|
|
|
if (!localStorage.getItem('striked')) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (isMounted) {
|
|
|
|
|
strike()
|
|
|
|
|
localStorage.setItem('striked', 'yep')
|
|
|
|
|
setFired(true)
|
|
|
|
|
}
|
|
|
|
|
}, randInRange(3000, 10000))
|
|
|
|
|
}
|
|
|
|
|
return () => { isMounted = false }
|
|
|
|
|
}, [])
|
2021-12-06 16:32:58 +00:00
|
|
|
}
|
2023-01-10 00:33:44 +00:00
|
|
|
return path !== '/login' && path !== '/signup' && !path.startsWith('/invites') &&
|
2023-05-03 00:22:23 +00:00
|
|
|
<div className='ml-auto'>
|
2023-01-10 00:33:44 +00:00
|
|
|
<Button
|
|
|
|
|
className='align-items-center px-3 py-1 mr-2'
|
|
|
|
|
id='signup'
|
|
|
|
|
style={{ borderWidth: '2px' }}
|
|
|
|
|
variant='outline-grey-darkmode'
|
|
|
|
|
onClick={async () => await router.push({ pathname: '/login', query: { callbackUrl: window.location.origin + router.asPath } })}
|
|
|
|
|
>
|
|
|
|
|
login
|
|
|
|
|
</Button>
|
|
|
|
|
<Button
|
|
|
|
|
className='align-items-center pl-2 py-1 pr-3'
|
|
|
|
|
style={{ borderWidth: '2px' }}
|
|
|
|
|
id='login'
|
|
|
|
|
onClick={async () => await router.push({ pathname: '/signup', query: { callbackUrl: window.location.origin + router.asPath } })}
|
|
|
|
|
>
|
|
|
|
|
<LightningIcon
|
|
|
|
|
width={17}
|
|
|
|
|
height={17}
|
|
|
|
|
className='mr-1'
|
|
|
|
|
/>sign up
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
2021-04-12 18:05:09 +00:00
|
|
|
}
|
2021-03-25 19:29:24 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-01 20:58:30 +00:00
|
|
|
// const showJobIndicator = sub !== 'jobs' && (!me || me.noteJobIndicator) &&
|
|
|
|
|
// (!lastCheckedJobs || lastCheckedJobs < subLatestPost?.subLatestPost)
|
2022-09-02 16:53:44 +00:00
|
|
|
|
2022-05-09 17:30:27 +00:00
|
|
|
const NavItems = ({ className }) => {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
2023-05-01 20:58:30 +00:00
|
|
|
<Nav.Item className={className}>
|
|
|
|
|
<Form
|
|
|
|
|
initial={{
|
|
|
|
|
sub: sub || 'home'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Select
|
|
|
|
|
groupClassName='mb-0'
|
|
|
|
|
onChange={(formik, e) => router.push(e.target.value === 'home' ? '/' : `/~${e.target.value}`)}
|
|
|
|
|
name='sub'
|
|
|
|
|
size='sm'
|
2023-06-20 16:26:23 +00:00
|
|
|
items={['home', ...SUBS]}
|
2023-05-01 20:58:30 +00:00
|
|
|
/>
|
|
|
|
|
</Form>
|
|
|
|
|
</Nav.Item>
|
|
|
|
|
<Nav.Item className={className}>
|
|
|
|
|
<Link href={prefix + '/'} passHref>
|
|
|
|
|
<Nav.Link eventKey='' className={styles.navLink}>hot</Nav.Link>
|
|
|
|
|
</Link>
|
|
|
|
|
</Nav.Item>
|
2022-05-09 17:30:27 +00:00
|
|
|
<Nav.Item className={className}>
|
|
|
|
|
<Link href={prefix + '/recent'} passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<Nav.Link eventKey='recent' className={styles.navLink}>recent</Nav.Link>
|
2022-05-09 17:30:27 +00:00
|
|
|
</Link>
|
|
|
|
|
</Nav.Item>
|
2023-06-12 22:15:20 +00:00
|
|
|
{sub !== 'jobs' &&
|
2022-05-09 17:30:27 +00:00
|
|
|
<Nav.Item className={className}>
|
2023-06-12 22:15:20 +00:00
|
|
|
<Link href={prefix + '/top/posts/day'} passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<Nav.Link eventKey='top' className={styles.navLink}>top</Nav.Link>
|
2022-05-09 17:30:27 +00:00
|
|
|
</Link>
|
|
|
|
|
</Nav.Item>}
|
2023-05-01 20:58:30 +00:00
|
|
|
{/* <Nav.Item className={className}>
|
2022-05-09 17:30:27 +00:00
|
|
|
<div className='position-relative'>
|
|
|
|
|
<Link href='/~jobs' passHref>
|
|
|
|
|
<Nav.Link active={sub === 'jobs'} className={styles.navLink}>
|
|
|
|
|
jobs
|
|
|
|
|
</Nav.Link>
|
|
|
|
|
</Link>
|
2022-09-02 16:53:44 +00:00
|
|
|
{showJobIndicator &&
|
2022-05-09 17:30:27 +00:00
|
|
|
<span className={styles.jobIndicator}>
|
|
|
|
|
<span className='invisible'>{' '}</span>
|
|
|
|
|
</span>}
|
|
|
|
|
</div>
|
2023-05-01 20:58:30 +00:00
|
|
|
</Nav.Item> */}
|
|
|
|
|
{/* <Nav.Item className={`text-monospace nav-link mx-auto px-0 ${me?.name.length > 6 ? 'd-none d-lg-flex' : ''}`}>
|
|
|
|
|
<Price />
|
|
|
|
|
</Nav.Item> */}
|
2022-05-09 17:30:27 +00:00
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-01 20:58:30 +00:00
|
|
|
const PostItem = ({ className }) => {
|
|
|
|
|
return me
|
|
|
|
|
? (
|
2023-06-03 22:49:04 +00:00
|
|
|
<Link href={prefix + '/post'} passHref>
|
|
|
|
|
<a className={`${className} btn btn-md btn-primary px-3 py-1 `}>post</a>
|
|
|
|
|
</Link>)
|
2023-05-01 20:58:30 +00:00
|
|
|
: null
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-25 19:29:24 +00:00
|
|
|
return (
|
2021-04-12 18:05:09 +00:00
|
|
|
<>
|
2023-05-01 20:58:30 +00:00
|
|
|
<Container className='px-0'>
|
2023-06-02 00:34:26 +00:00
|
|
|
<Navbar className='pb-0 pb-lg-2'>
|
2021-10-07 03:20:59 +00:00
|
|
|
<Nav
|
|
|
|
|
className={styles.navbarNav}
|
2022-08-23 22:34:51 +00:00
|
|
|
activeKey={topNavKey}
|
2021-10-07 03:20:59 +00:00
|
|
|
>
|
2023-05-01 20:58:30 +00:00
|
|
|
<div className='d-flex align-items-center'>
|
2023-05-31 22:28:33 +00:00
|
|
|
<Back />
|
2022-02-17 17:23:43 +00:00
|
|
|
<Link href='/' passHref>
|
2023-05-01 20:58:30 +00:00
|
|
|
<Navbar.Brand className={`${styles.brand} d-flex`}>
|
2022-02-17 17:23:43 +00:00
|
|
|
SN
|
|
|
|
|
</Navbar.Brand>
|
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
2023-06-02 00:34:26 +00:00
|
|
|
<NavItems className='d-none d-lg-flex mx-2' />
|
|
|
|
|
<PostItem className='d-none d-lg-flex mx-2' />
|
2023-05-01 20:58:30 +00:00
|
|
|
<Link href='/search' passHref>
|
2023-06-02 00:34:26 +00:00
|
|
|
<Nav.Link eventKey='search' className='position-relative d-none d-lg-flex align-items-center pr-0 ml-2'>
|
2023-05-01 20:58:30 +00:00
|
|
|
<SearchIcon className='theme' width={22} height={22} />
|
|
|
|
|
</Nav.Link>
|
|
|
|
|
</Link>
|
2023-05-03 00:22:23 +00:00
|
|
|
<Nav.Item className={`${styles.price} ml-auto align-items-center ${me?.name.length > 10 ? 'd-none d-lg-flex' : ''}`}>
|
2023-05-01 20:58:30 +00:00
|
|
|
<Price className='nav-link text-monospace' />
|
2021-04-28 19:30:14 +00:00
|
|
|
</Nav.Item>
|
2021-11-28 17:29:17 +00:00
|
|
|
<Corner />
|
2021-04-14 00:57:32 +00:00
|
|
|
</Nav>
|
2021-11-09 22:43:56 +00:00
|
|
|
</Navbar>
|
2023-06-02 00:34:26 +00:00
|
|
|
<Navbar className='pt-0 pb-2 d-lg-none'>
|
2022-03-08 20:51:06 +00:00
|
|
|
<Nav
|
2023-05-01 20:58:30 +00:00
|
|
|
className={`${styles.navbarNav}`}
|
2022-08-23 22:34:51 +00:00
|
|
|
activeKey={topNavKey}
|
2022-03-08 20:51:06 +00:00
|
|
|
>
|
2023-05-01 20:58:30 +00:00
|
|
|
<NavItems className='mr-1' />
|
|
|
|
|
<Link href='/search' passHref>
|
|
|
|
|
<Nav.Link eventKey='search' className='position-relative ml-auto d-flex mr-1'>
|
|
|
|
|
<SearchIcon className='theme' width={22} height={22} />
|
|
|
|
|
</Nav.Link>
|
|
|
|
|
</Link>
|
|
|
|
|
<PostItem className='mr-0 pr-0' />
|
2022-03-08 20:51:06 +00:00
|
|
|
</Nav>
|
|
|
|
|
</Navbar>
|
2021-04-28 16:30:02 +00:00
|
|
|
</Container>
|
2021-04-12 18:05:09 +00:00
|
|
|
</>
|
2021-03-25 19:29:24 +00:00
|
|
|
)
|
|
|
|
|
}
|
2022-05-18 20:55:06 +00:00
|
|
|
|
|
|
|
|
export function HeaderStatic () {
|
|
|
|
|
return (
|
|
|
|
|
<Container className='px-sm-0'>
|
2023-06-02 00:34:26 +00:00
|
|
|
<Navbar className='pb-0 pb-lg-1'>
|
2022-05-18 20:55:06 +00:00
|
|
|
<Nav
|
|
|
|
|
className={styles.navbarNav}
|
|
|
|
|
>
|
2023-05-01 20:58:30 +00:00
|
|
|
<div className='d-flex align-items-center'>
|
2023-05-31 22:28:33 +00:00
|
|
|
<Back />
|
2022-05-18 20:55:06 +00:00
|
|
|
<Link href='/' passHref>
|
2023-05-01 20:58:30 +00:00
|
|
|
<Navbar.Brand className={`${styles.brand}`}>
|
2022-05-18 20:55:06 +00:00
|
|
|
SN
|
|
|
|
|
</Navbar.Brand>
|
|
|
|
|
</Link>
|
2023-05-01 20:58:30 +00:00
|
|
|
|
|
|
|
|
<Link href='/search' passHref>
|
|
|
|
|
<Nav.Link eventKey='search' className='position-relative d-flex align-items-center mx-2'>
|
|
|
|
|
<SearchIcon className='theme' width={22} height={22} />
|
|
|
|
|
</Nav.Link>
|
|
|
|
|
</Link>
|
2022-05-18 20:55:06 +00:00
|
|
|
</div>
|
|
|
|
|
</Nav>
|
|
|
|
|
</Navbar>
|
|
|
|
|
</Container>
|
|
|
|
|
)
|
|
|
|
|
}
|
