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 {
color: $grey-40;
}
& > a, & > span {
display: block;
padding: 12px;
padding: 12px 12px;
}
& > div {
@ -37,16 +41,23 @@
flex-direction: row;
padding: 10px 12px;
span {
flex-grow: 1;
}
&:hover {
i.tag {
background: $grey-60;
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 Link from 'next/link'
import { useSnapshot } from 'valtio'
import { accountState } from '~utils/accountState'
import { useCookies } from 'react-cookie'
import AboutModal from '~components/AboutModal'
import AccountModal from '~components/AccountModal'
@ -18,14 +16,27 @@ interface Props {
}
const HeaderMenu = (props: Props) => {
const { account } = useSnapshot(accountState)
const [cookies] = useCookies()
function authItems() {
return (
<nav>
<ul className="Menu auth">
<div className="MenuGroup">
<li className="MenuItem">
<Link href={`/${account.user?.username}` || ''}>{account.user?.username}</Link>
<li className="MenuItem profile">
<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 className="MenuItem">
<Link href={`/saved` || ''}>Saved</Link>
@ -66,8 +77,11 @@ const HeaderMenu = (props: Props) => {
<Link href='/teams'>Teams</Link>
</li>
<li className="MenuItem">
<Link href='/guides'>Guides</Link>
<li className="MenuItem disabled">
<div>
<span>Guides</span>
<i className="tag">Coming Soon</i>
</div>
</li>
</div>
<div className="MenuGroup">