nav done
This commit is contained in:
parent
52201afa0d
commit
bbfdba7eed
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M256 250.8a73.34 73.34 0 1 1 73.33-73.34A73.41 73.41 0 0 1 256 250.8zm0-125.53a52.2 52.2 0 1 0 52.19 52.19A52.25 52.25 0 0 0 256 125.27zm117.07 282.6H138.93l-10.57-10.57a127.64 127.64 0 1 1 255.28 0zM150 386.73h212a106.51 106.51 0 0 0-212 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 334 B |
|
|
@ -12,7 +12,6 @@
|
|||
}
|
||||
|
||||
&__list {
|
||||
background: #e0dfdf;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,39 @@
|
|||
.nav {
|
||||
&__dropdown {
|
||||
border-radius: 1rem;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
@include transition-std;
|
||||
top: calc(100% + 1rem);
|
||||
left: 0;
|
||||
height: 0;
|
||||
|
||||
border: 0.1rem solid #c8c8c8;
|
||||
|
||||
&.active {
|
||||
height: 15rem;
|
||||
opacity: 1;
|
||||
@include transition-std;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
|
||||
&:nth-child(2n) {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -7,36 +42,67 @@
|
|||
}
|
||||
|
||||
&__right {
|
||||
justify-self: flex-end;
|
||||
max-width: 10rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
&__user {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background: #f1f4f8;
|
||||
border: 0.1rem solid #c8c8c8;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
@include transition-std;
|
||||
|
||||
h2 {
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
&:hover {
|
||||
@include transition-std;
|
||||
background: #b9b9b9;
|
||||
}
|
||||
|
||||
button {
|
||||
border-top: 0.1rem solid #c8c8c8;
|
||||
padding: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
color: rgb(37, 172, 218);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
&__img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
||||
img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
h2 {
|
||||
padding: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
// Modules
|
||||
import { useContext } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import { UserContext } from "../context/UserContext";
|
||||
|
||||
// Icons
|
||||
import Orient from "../assets/icons/logo_orient.svg";
|
||||
import Burger from "../assets/icons/burger.svg";
|
||||
import Profile from "../assets/icons/profile.svg";
|
||||
|
||||
// Types
|
||||
import { userContextType } from "../types/user";
|
||||
|
|
@ -15,6 +16,7 @@ interface Props {
|
|||
|
||||
const Nav = ({ aside, setAside }: Props) => {
|
||||
const { user, setUser }: userContextType = useContext(UserContext);
|
||||
const [dropdown, setDropdown] = useState<boolean>(false);
|
||||
return (
|
||||
<nav className="nav">
|
||||
<div className="container">
|
||||
|
|
@ -32,14 +34,41 @@ const Nav = ({ aside, setAside }: Props) => {
|
|||
</button>
|
||||
</div>
|
||||
<div className="nav__right">
|
||||
<div className="nav__right__user">
|
||||
<h2>
|
||||
<span>User:</span> {" " + user.username && user.username}
|
||||
</h2>
|
||||
<h3>
|
||||
<span>Access:</span>{" "}
|
||||
{" " + user.accessLevel && user.accessLevel}
|
||||
</h3>
|
||||
<div
|
||||
className="nav__right__user"
|
||||
onClick={() => {
|
||||
setDropdown(!dropdown);
|
||||
}}
|
||||
>
|
||||
<div className="nav__right__user__img">
|
||||
<img src={Profile} alt="" />
|
||||
</div>
|
||||
<span>Profile</span>
|
||||
<div
|
||||
className={dropdown ? "nav__dropdown active" : "nav__dropdown"}
|
||||
>
|
||||
<ul className="nav__dropdown__wrapper">
|
||||
<li>
|
||||
<h2>Username:</h2>
|
||||
<p>{user.username}</p>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Access:</h2>
|
||||
<p>{user.accessLevel}</p>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
localStorage.removeItem("userData");
|
||||
setUser({ username: "", accessLevel: "" });
|
||||
}}
|
||||
>
|
||||
Log out
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue