archiwum/web
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add reflection of user's login state to navbar

Browse Source
This commit is contained in:
jakubmanczak
2022-12-28 17:05:55 +01:00
parent 6b4a025e0e
commit d1feca9544
2 changed files with 56 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/Navigation/Navigation.module.scss
View File

@@ -20,10 +20,24 @@
color: var(--color); color: var(--color);
} }
} }
.partprofile {
background: rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.profile { .profile {
background: rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
margin-left: auto; margin-left: auto;
background: var(--color); img {
color: var(--backdrop); height: 2.3rem;
border-radius: 50%;
}
} }
.logo { .logo {
padding: 0 1rem; padding: 0 1rem;

55
components/Navigation/Navigation.tsx
View File

@@ -5,8 +5,10 @@ import { Icon } from "../Icon";
import navigation from "../../data/navigation.json"; import navigation from "../../data/navigation.json";
import Link from "next/link"; import Link from "next/link";
import { useUser } from "@auth0/nextjs-auth0/client";
const Navigation = () => { const Navigation = () => {
let username: string = ""; const { user, isLoading } = useUser();
return ( return (
<> <>
<div className={styles.nav}> <div className={styles.nav}>
@@ -42,20 +44,43 @@ const Navigation = () => {
})} })}
</div> </div>
</div> </div>
<a {isLoading && (
href="/api/auth/login" <>
style={{ display: "flex" }} <Link href="/" className={`${styles.link} ${styles.profile}`}>
className={`${styles.link} ${styles.profile}`} fetching danych...
> </Link>
zaloguj się </>
</a> )}
<Link {!isLoading && user && (
href="" <>
style={{ display: "none" }} <Link href="/ja" className={`${styles.link} ${styles.profile}`}>
className={`${styles.link} ${styles.profile}`} {user.picture && (
> <img
{username ? username : "twój profil"} src={user.picture}
</Link> alt={`${user.name}'s profile picture`}
/>
)}
{!user.picture && <Icon icon="User" />}
{user.nickname}
</Link>
<a
href="/api/auth/logout"
className={`${styles.link} ${styles.partprofile}`}
>
<Icon icon="LogOut" />
</a>
</>
)}
{!isLoading && !user && (
<a
href="/api/auth/login"
style={{ display: "flex" }}
className={`${styles.link} ${styles.partprofile}`}
>
zaloguj się
<Icon icon="LogIn" />
</a>
)}
</div> </div>
</> </>
); );