From df83288591c08c123f331299b01bb4be3e2deea2 Mon Sep 17 00:00:00 2001
From: David Bruno Vontor <bruno.vontor@vitkovice.com>
Date: Thu, 11 Dec 2025 14:32:19 +0100
Subject: [PATCH] Improve mobile navbar and user area styling

Navbar now applies a mobileNavOpen style when the mobile menu is open, improving mobile compatibility. User area elements are moved into the link group for better mobile layout, and several CSS adjustments were made for smoother transitions and consistent icon sizing.
---
 frontend/src/components/navbar/SiteNav.tsx    | 26 +++++++++----------
 .../src/components/navbar/navbar.module.css   |  9 ++++++-
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/navbar/SiteNav.tsx b/frontend/src/components/navbar/SiteNav.tsx
index d999dbe..e84daf1 100644
--- a/frontend/src/components/navbar/SiteNav.tsx
+++ b/frontend/src/components/navbar/SiteNav.tsx
@@ -57,7 +57,7 @@ export default function Navbar({ user, onLogin, onLogout }: NavbarProps) {
   }, []);
 
   return (
-    <nav className={styles.navbar} ref={navRef} aria-label="Hlavní navigace">
+    <nav className={`${styles.navbar} ${mobileMenu ? styles.mobileNavOpen : ""}`} ref={navRef} aria-label="Hlavní navigace">
       {/* mobile burger */}
       <button
         className={styles.burger}
@@ -114,20 +114,16 @@ export default function Navbar({ user, onLogin, onLogout }: NavbarProps) {
 
         <a className={styles.linkSimple} href="#contacts"><FaGlobe className={styles.iconSmall}/> Kontakt</a>
         <a className={styles.linkSimple} href="/projects"><FaProjectDiagram className={styles.iconSmall}/> Projekty</a>
-      </div>
-
-
-      {/*FIXME: STRČIT USER ČÁST DO LINK SKUPINY ABY TO BYLO KOMPATIBILNI PRO MOBIL*/}
-      {/* right: user area */}
-      <div className={styles.user}>
+      
+        {/* right: user area */}
         {!user ? (
-          <button className={styles.loginBtn} onClick={onLogin} aria-label="Přihlásit">
-            <FaSignInAlt />
-          </button>
+          <a className={styles.linkSimple} onClick={onLogin} aria-label="Přihlásit">
+            <FaSignInAlt className={styles.iconSmall} />
+          </a>
         ) : (
-          <div className={`${styles.userWrapper} ${styles.dropdownItem}`}>
+          <div className={styles.dropdownItem}>
             <button
-              className={styles.userButton}
+              className={styles.linkButton}
               aria-haspopup="true"
             >
               {user.avatarUrl ? (
@@ -145,12 +141,16 @@ export default function Navbar({ user, onLogin, onLogout }: NavbarProps) {
               <a href="/billing" role="menuitem">Platby</a>
 
               <button className={styles.logoutBtn} onClick={onLogout} role="menuitem">
-                <FaSignOutAlt /> Odhlásit se
+                <FaSignOutAlt className={styles.iconSmall} /> Odhlásit se
               </button>
             </div>
           </div>
         )}
       </div>
+
+
+      {/*FIXME: STRČIT USER ČÁST DO LINK SKUPINY ABY TO BYLO KOMPATIBILNI PRO MOBIL*/}
+      
     </nav>
   );
 }
diff --git a/frontend/src/components/navbar/navbar.module.css b/frontend/src/components/navbar/navbar.module.css
index efa5628..fb7e68f 100644
--- a/frontend/src/components/navbar/navbar.module.css
+++ b/frontend/src/components/navbar/navbar.module.css
@@ -17,6 +17,12 @@
 
     --nav-margin-y: 1em;
     opacity: 0.95;
+
+    transition: all 0.3s ease-in-out;
+}
+
+.mobileNavOpen{
+    border-radius: 0;
 }
 
 /* Brand */
@@ -107,6 +113,7 @@
     align-items: center;
     gap: 0.4rem;
     margin: var(--nav-margin-y) auto;
+    width: max-content;
 }
 
 .linkButton:hover {
@@ -315,7 +322,7 @@
 }
 
 .userIcon {
-    font-size: 1.6rem;
+    font-size: inherit;
 }
 
 .avatar {