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

@@ -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}>
         {!user ? (
-          <button className={styles.loginBtn} onClick={onLogin} aria-label="Přihlásit">
+          <a className={styles.linkSimple} onClick={onLogin} aria-label="Přihlásit">
-            <FaSignInAlt />
+            <FaSignInAlt className={styles.iconSmall} />
-          </button>
+          </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>
   );
 }

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 {