From 77e481cb1b9e199815097095d68e48619da126dd Mon Sep 17 00:00:00 2001
From: Wellington Mazoni de Andrade <well@wmazoni.com.br>
Date: Wed, 1 May 2024 17:06:51 -0300
Subject: [PATCH] Login/Logout style

---
 frontend/src/components/Navbar/index.tsx  |  4 ++--
 frontend/src/components/Navbar/styles.css | 28 +++++++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Navbar/index.tsx b/frontend/src/components/Navbar/index.tsx
index 5194879..d1d19c8 100644
--- 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
index b41d63b..95a5c96 100644
--- 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;
+  }
+}