granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds a COMING SOON tag to Guides

Browse source 
We won't get this done anytime soon
This commit is contained in:
Justin Edmund 2022-03-04 05:18:07 -08:00
parent 4e701572ab
commit a186fab73c
2 changed files with 33 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
components/HeaderMenu/index.scss
View file

@ -12,7 +12,7 @@
color: $grey-40; color: $grey-40;
font-weight: $normal; font-weight: $normal;
&:hover { &:hover:not(.disabled) {
background: $grey-100; background: $grey-100;
color: $grey-00; color: $grey-00;
cursor: pointer; cursor: pointer;
@ -26,10 +26,28 @@
color: $grey-40; color: $grey-40;
} }
a, span { & > a, & > span {
display: block; display: block;
padding: 12px; padding: 12px;
} }
& > div {
align-items: center;
display: flex;
flex-direction: row;
padding: 10px 12px;
span {
flex-grow: 1;
}
&:hover {
i.tag {
background: $grey-60;
color: white;
}
}
}
} }
.MenuGroup { .MenuGroup {

25
components/HeaderMenu/index.tsx
View file

@ -1,14 +1,13 @@
import React from 'react' import React from 'react'
import Link from 'next/link' import Link from 'next/link'
import { useSnapshot } from 'valtio'
import LoginModal from '~components/LoginModal' import { accountState } from '~utils/accountState'
import SignupModal from '~components/SignupModal'
import { useModal as useSignupModal } from '~utils/useModal'
import { useModal as useLoginModal } from '~utils/useModal'
import { useModal as useAboutModal } from '~utils/useModal'
import AboutModal from '~components/AboutModal' import AboutModal from '~components/AboutModal'
import AccountModal from '~components/AccountModal'
import LoginModal from '~components/LoginModal'
import SignupModal from '~components/SignupModal'
import './index.scss' import './index.scss'
@ -19,13 +18,14 @@ interface Props {
} }
const HeaderMenu = (props: Props) => { const HeaderMenu = (props: Props) => {
const { account } = useSnapshot(accountState)
function authItems() { function authItems() {
return ( return (
<nav> <nav>
<ul className="Menu auth"> <ul className="Menu auth">
<div className="MenuGroup"> <div className="MenuGroup">
<li className="MenuItem"> <li className="MenuItem">
<Link href={`/${props.username}` || ''}>{props.username}</Link> <Link href={`/${account.user?.username}` || ''}>{account.user?.username}</Link>
</li> </li>
<li className="MenuItem"> <li className="MenuItem">
<Link href={`/saved` || ''}>Saved</Link> <Link href={`/saved` || ''}>Saved</Link>
@ -36,15 +36,16 @@ const HeaderMenu = (props: Props) => {
<Link href='/teams'>Teams</Link> <Link href='/teams'>Teams</Link>
</li> </li>
<li className="MenuItem"> <li className="MenuItem disabled">
<Link href='/guides'>Guides</Link> <div>
<span>Guides</span>
<i className="tag">Coming Soon</i>
</div>
</li> </li>
</div> </div>
<div className="MenuGroup"> <div className="MenuGroup">
<AboutModal /> <AboutModal />
<li className="MenuItem"> <AccountModal />
<span>Settings</span>
</li>
<li className="MenuItem" onClick={props.logout}> <li className="MenuItem" onClick={props.logout}>
<span>Logout</span> <span>Logout</span>
</li> </li>