Changeset befb988 for jobvista-frontend/src/views/static/Header.css

Timestamp:

06/17/24 21:59:14 (2 weeks ago)

Author:

223021 <daniel.ilievski.2@…>

Branches:

main

Children:

08f82ec

Parents:

b248810

Message:

Added an edit profile page for both job seekers and recruiters, where they can upload profile pictures/company logos and edit their profile data. Added profile page specifically for recruiters. Refactored existing code.

File:

• jobvista-frontend/src/views/static/Header.css (modified) (5 diffs)

jobvista-frontend/src/views/static/Header.css

@@ -6 +6 @@
     background-size: contain;
     margin-right: 0;
+
 }
 
@@ -18 +19 @@
 
 .navbar {
+    width: calc(100% - 17px);
     height: 80px;
-    background-color: #535C91;
+    background-color: #f8f9fa;
     font-family: Poppins, sans-serif;
+    position: fixed;
+    z-index: 10;
+    box-sizing: border-box;
 }
 
 .navbar .nav-item {
-
     color: rgba(1,38,90,0.9);
     margin-right: 15px;
@@ -31 +35 @@
     font-size: 20px;
     font-weight: 600;
-    //font-family: 'Ubuntu', sans-serif;
     font-family: Poppins, sans-serif;
 }
@@ -37 +40 @@
     color: white;
     background-color: rgba(1,38,90,0.9);
-    /*border-bottom: 3px solid rgba(1,38,90,0.9);*/
 }
 .active {
@@ -44 +46 @@
 }
 
-.user {
-
-}
-
-.auth-box {
-    display: inline-block;
-    margin-right: 35px;
-    margin-left: 5px;
-    //height: 50px;
-
-}
-
-.user {
+/*NOVO*/
+
+:root {
+    --gray: #555;
+    --purple: #4e65ff;
+    --green-blue: #92effd;
+    --white: #fff;
+}
+
+.navigation {
+    position: fixed;
+    top: 10px;
+    right: 20px;
+    width: 120px;
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 5px;
+    background: var(--white);
+    box-shadow: 0 25px 35px rgba(0, 0, 0, 0.3);
+    /*box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.46);*/
+    overflow: hidden;
+    transition: height 0.5s, width 0.5s;
+    transition-delay: 0s, 0.3s;
+    z-index: 15;
+    /*border: 2px solid var(--gray);*/
+}
+
+.navigation .user-box {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    transition: 0.3s;
+    transition-delay: 0.3s;
+}
+
+.navigation .user-box .username {
+    font-size: 1.2rem;
+     font-weight: bold;
+    white-space: nowrap;
+    margin: 0;
     color: black;
     padding-top: 10px;
-    margin-bottom: 0;
-
-}
-
-.role {
+
+}
+
+.navigation .user-box .role {
     color: darkgray;
     margin-bottom: 10px;
-    font-size: 15px;
-
-}
-
-
+    font-size: 1rem;
+}
+
+.navigation .user-box .image-box {
+    position: relative;
+    min-width: 60px;
+    height: 60px;
+    background: var(--white);
+    border-radius: 50%;
+    overflow: hidden;
+    border: 10px solid var(--white);
+
+}
+
+.navigation .user-box .image-box img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    /*border: 1px solid black*/
+}
+
+.navigation .menu-toggle {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.navigation .menu-toggle::before {
+    content: "";
+    position: absolute;
+    width: 32px;
+    height: 2px;
+    background: var(--gray);
+    transform: translateY(-10px);
+    box-shadow: 0 10px var(--gray);
+    transition: 0.5s;
+}
+
+.navigation .menu-toggle::after {
+    content: "";
+    position: absolute;
+    width: 32px;
+    height: 2px;
+    background: var(--gray);
+    transform: translateY(10px);
+    transition: 0.5s;
+}
+
+.menu {
+    position: absolute;
+    width: 100%;
+    /*height: calc(100% - 60px);*/
+    margin-top: 60px;
+    padding: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.menu .menu-link {
+    text-decoration: none;
+    color: black;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1.1rem;
+    padding: 15px 30px;
+}
+.menu .menu-link:hover {
+    background-color: #EEEEEE;
+}
+
+
+.navigation.active .menu-toggle::before {
+    transform: translateY(0px) rotate(45deg);
+    box-shadow: none;
+}
+
+.navigation.active .menu-toggle::after {
+    transform: translateY(0px) rotate(-45deg);
+}
+
+.navigation.active {
+    width: 300px;
+    height: 175px;
+    transition: width 0.3s, height 0.3s;
+    transition-delay: 0s, 0.3s;
+}
+
+.navigation.active .user-box {
+    width: calc(100% - 60px);
+    transition-delay: 0s;
+}
+
+
+
+
+