Remove HeaderMenu component
This commit is contained in:
parent
308ae92957
commit
4d1b3fbb71
2 changed files with 0 additions and 205 deletions
|
|
@ -1,205 +0,0 @@
|
||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
import { useRouter } from 'next/router'
|
|
||||||
import { useTranslation } from 'next-i18next'
|
|
||||||
import { setCookie } from 'cookies-next'
|
|
||||||
import classNames from 'classnames'
|
|
||||||
import { retrieveCookies, retrieveLocaleCookies } from '~utils/retrieveCookies'
|
|
||||||
|
|
||||||
import Link from 'next/link'
|
|
||||||
import * as Switch from '@radix-ui/react-switch'
|
|
||||||
|
|
||||||
import AccountModal from '~components/AccountModal'
|
|
||||||
import LoginModal from '~components/LoginModal'
|
|
||||||
import SignupModal from '~components/SignupModal'
|
|
||||||
|
|
||||||
import './index.scss'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
authenticated: boolean
|
|
||||||
open: boolean
|
|
||||||
username?: string
|
|
||||||
onClickOutside: () => void
|
|
||||||
logout?: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const HeaderMenu = (props: Props) => {
|
|
||||||
// Setup
|
|
||||||
const router = useRouter()
|
|
||||||
const data: GranblueCookie | undefined = retrieveCookies()
|
|
||||||
const localeData = retrieveLocaleCookies()
|
|
||||||
const { t } = useTranslation('common')
|
|
||||||
|
|
||||||
// Refs
|
|
||||||
const ref: React.RefObject<HTMLDivElement> = React.createRef()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleClickOutside = (event: Event) => {
|
|
||||||
const target = event.target instanceof Element ? event.target : null
|
|
||||||
const isButton = target && target.closest('.Button.Active')
|
|
||||||
|
|
||||||
if (
|
|
||||||
ref.current &&
|
|
||||||
target &&
|
|
||||||
!ref.current.contains(target) &&
|
|
||||||
!isButton &&
|
|
||||||
props.open
|
|
||||||
) {
|
|
||||||
props.onClickOutside()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
document.addEventListener('click', handleClickOutside, true)
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('click', handleClickOutside, true)
|
|
||||||
}
|
|
||||||
}, [props.onClickOutside])
|
|
||||||
|
|
||||||
const [checked, setChecked] = useState(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setChecked(localeData === 'ja' ? true : false)
|
|
||||||
}, [localeData])
|
|
||||||
|
|
||||||
function handleCheckedChange(value: boolean) {
|
|
||||||
const language = value ? 'ja' : 'en'
|
|
||||||
|
|
||||||
const expiresAt = new Date()
|
|
||||||
expiresAt.setDate(expiresAt.getDate() + 60)
|
|
||||||
|
|
||||||
setCookie('NEXT_LOCALE', language, { path: '/', expires: expiresAt })
|
|
||||||
router.push(router.asPath, undefined, { locale: language })
|
|
||||||
}
|
|
||||||
|
|
||||||
const menuClasses = classNames({
|
|
||||||
Menu: true,
|
|
||||||
auth: props.authenticated,
|
|
||||||
open: props.open,
|
|
||||||
})
|
|
||||||
|
|
||||||
function authItems() {
|
|
||||||
return (
|
|
||||||
<ul className={menuClasses}>
|
|
||||||
<div className="MenuGroup">
|
|
||||||
<li className="MenuItem profile">
|
|
||||||
<Link href={`/${data?.account.username}` || ''} passHref>
|
|
||||||
<div>
|
|
||||||
<span>{data?.account.username}</span>
|
|
||||||
<img
|
|
||||||
alt={data?.user.picture}
|
|
||||||
className={`profile ${data?.user.element}`}
|
|
||||||
srcSet={`/profile/${data?.user.picture}.png,
|
|
||||||
/profile/${data?.user.picture}@2x.png 2x`}
|
|
||||||
src={`/profile/${data?.user.picture}.png`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="MenuItem">
|
|
||||||
<Link href={`/saved` || ''}>{t('menu.saved')}</Link>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<div className="MenuGroup">
|
|
||||||
<li className="MenuItem">
|
|
||||||
<Link href="/teams">{t('menu.teams')}</Link>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="MenuItem disabled">
|
|
||||||
<div>
|
|
||||||
<span>{t('menu.guides')}</span>
|
|
||||||
<i className="tag">{t('coming_soon')}</i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<div className="MenuGroup">
|
|
||||||
<li className="MenuItem">
|
|
||||||
<a href="/about" target="_blank">
|
|
||||||
{t('about.segmented_control.about')}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="MenuItem">
|
|
||||||
<a href="/updates" target="_blank">
|
|
||||||
{t('about.segmented_control.updates')}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="MenuItem">
|
|
||||||
<a href="/roadmap" target="_blank">
|
|
||||||
{t('about.segmented_control.roadmap')}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<div className="MenuGroup">
|
|
||||||
<AccountModal
|
|
||||||
username={data?.account.username}
|
|
||||||
picture={data?.user.picture}
|
|
||||||
gender={data?.user.gender}
|
|
||||||
language={data?.user.language}
|
|
||||||
theme={data?.user.theme}
|
|
||||||
/>
|
|
||||||
<li className="MenuItem" onClick={props.logout}>
|
|
||||||
<span>{t('menu.logout')}</span>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function unauthItems() {
|
|
||||||
return (
|
|
||||||
<ul className={menuClasses}>
|
|
||||||
<div className="MenuGroup">
|
|
||||||
<li className="MenuItem language">
|
|
||||||
<span>{t('menu.language')}</span>
|
|
||||||
<Switch.Root
|
|
||||||
className="Switch"
|
|
||||||
onCheckedChange={handleCheckedChange}
|
|
||||||
checked={checked}
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="Thumb" />
|
|
||||||
<span className="left">JP</span>
|
|
||||||
<span className="right">EN</span>
|
|
||||||
</Switch.Root>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<div className="MenuGroup">
|
|
||||||
<li className="MenuItem">
|
|
||||||
<Link href="/teams">{t('menu.teams')}</Link>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="MenuItem disabled">
|
|
||||||
<div>
|
|
||||||
<span>{t('menu.guides')}</span>
|
|
||||||
<i className="tag">{t('coming_soon')}</i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<div className="MenuGroup">
|
|
||||||
<li className="MenuItem">
|
|
||||||
<a href="/about" target="_blank">
|
|
||||||
{t('about.segmented_control.about')}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="MenuItem">
|
|
||||||
<a href="/updates" target="_blank">
|
|
||||||
{t('about.segmented_control.updates')}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="MenuItem">
|
|
||||||
<a href="/roadmap" target="_blank">
|
|
||||||
{t('about.segmented_control.roadmap')}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<div className="MenuGroup">
|
|
||||||
<LoginModal />
|
|
||||||
<SignupModal />
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav ref={ref}>{props.authenticated ? authItems() : unauthItems()}</nav>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default HeaderMenu
|
|
||||||
Loading…
Reference in a new issue