nav done

src/assets/icons/profile.svg

@@ -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>

src/assets/styles/_aside.scss

@@ -12,7 +12,6 @@
   }
 
   &__list {
-    background: #e0dfdf;
     width: 100%;
     padding: 1rem;
     display: flex;

src/assets/styles/_nav.scss

@@ -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 {
+      &:hover {
-        width: 100%;
+        @include transition-std;
-        font-weight: normal;
+        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 {
+      &__img {
-          font-weight: bold;
+        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;
-        }
       }
     }
   }

src/components/Nav.tsx

@@ -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">
+            <div
-              <h2>
+              className="nav__right__user"
-                <span>User:</span> {" " + user.username && user.username}
+              onClick={() => {
-              </h2>
+                setDropdown(!dropdown);
-              <h3>
+              }}
-                <span>Access:</span>{" "}
+            >
-                {" " + user.accessLevel && user.accessLevel}
+              <div className="nav__right__user__img">
-              </h3>
+                <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>