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

Add profile picture to HeaderMenu for auth users

Browse source
This commit is contained in:
Justin Edmund 2022-03-04 05:31:38 -08:00
parent 6165ed12d2
commit 42e328a4d4
2 changed files with 38 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
components/HeaderMenu/index.scss
View file

@ -22,13 +22,17 @@
} }
} }
&.profile > div {
padding: 6px 12px;
}
a { a {
color: $grey-40; color: $grey-40;
} }
& > a, & > span { & > a, & > span {
display: block; display: block;
padding: 12px; padding: 12px 12px;
} }
& > div { & > div {
@ -37,16 +41,23 @@
flex-direction: row; flex-direction: row;
padding: 10px 12px; padding: 10px 12px;
span {
flex-grow: 1;
}
&:hover { &:hover {
i.tag { i.tag {
background: $grey-60; background: $grey-60;
color: white; color: white;
} }
} }
span {
flex-grow: 1;
}
img {
$diameter: 32px;
border-radius: $diameter / 2;
height: $diameter;
width: $diameter;
}
} }
} }

30
components/HeaderMenu/index.tsx
View file

@ -1,8 +1,6 @@
import React from 'react' import React from 'react'
import Link from 'next/link' import Link from 'next/link'
import { useSnapshot } from 'valtio' import { useCookies } from 'react-cookie'
import { accountState } from '~utils/accountState'
import AboutModal from '~components/AboutModal' import AboutModal from '~components/AboutModal'
import AccountModal from '~components/AccountModal' import AccountModal from '~components/AccountModal'
@ -18,14 +16,27 @@ interface Props {
} }
const HeaderMenu = (props: Props) => { const HeaderMenu = (props: Props) => {
const { account } = useSnapshot(accountState)
const [cookies] = useCookies()
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 profile">
<Link href={`/${account.user?.username}` || ''}>{account.user?.username}</Link> <Link href={`/${cookies.user?.username}` || ''}>
<div>
<span>{cookies.user?.username}</span>
<img
alt={cookies.user?.picture}
className={`profile ${cookies.user?.element}`}
srcSet={`/profile/${cookies.user?.picture}.png,
/profile/${cookies.user?.picture}@2x.png 2x`}
src={`/profile/${cookies.user?.picture}.png`}
/>
</div
></Link>
</li> </li>
<li className="MenuItem"> <li className="MenuItem">
<Link href={`/saved` || ''}>Saved</Link> <Link href={`/saved` || ''}>Saved</Link>
@ -66,8 +77,11 @@ 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">