Login/Logout style

wmazoni · May 1, 2024 · 77e481c · 77e481c
1 parent 4737ab4
commit 77e481c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/frontend/src/components/Navbar/index.tsx b/frontend/src/components/Navbar/index.tsx
@@ -78,10 +78,10 @@ const Navbar = () => {
           </ul>
         </div>
 
-        <div>
+        <div className='nav-login-logout'>
           {authData.authenticated ? (
             <>
-              <span>{authData.tokenData?.user_name}</span>
+              <span className='nav-username'>{authData.tokenData?.user_name}</span>
               <Link to="#logout" onClick={handleLogoutClick}>
                 LOGOUT
               </Link>

diff --git a/frontend/src/components/Navbar/styles.css b/frontend/src/components/Navbar/styles.css
@@ -31,3 +31,31 @@
 .main-menu a:hover {
   color: #fff;
 }
+
+.nav-login-logout {
+  display: none;
+}
+
+.nav-username {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .nav-login-logout {
+    display: unset;
+    color: #fff;
+    margin-right: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .nav-login-logout {
+    display: unset;
+    color: #fff;
+    margin-right: 40px;
+  }
+  .nav-username {
+    display: unset;
+    margin-right: 20px;
+  }
+}