Fix navbar

Author: laiamp

src/TopBar.css

@@ -21,7 +21,7 @@
   transition: background-color 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
 }
 
-.top-bar.solid {
+/* .top-bar.solid {
   background-color: rgb(230, 230, 230);
   box-shadow: none; 
   border-radius: 0; 
@@ -30,7 +30,7 @@
   right: 0;
   margin: 0; 
   width: 100%;
-}
+} */
 
 /* --- Logo y Contenedores --- */
 .logo {
@@ -63,6 +63,7 @@
   transition: background-color 0.3s ease, color 0.3s ease, border-radius 0.3s ease;
   height: auto; 
   border-radius: 8px;
+  margin-left: 5px;
 }
 
 .top-bar-item:not(.btn-highlight):hover {
@@ -76,6 +77,7 @@
   padding: 1em 2em;
   border-radius: 8px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  margin-left: 30px;
 }
 
 .top-bar-item.btn-highlight:hover {
@@ -197,75 +199,91 @@
 /* --- Media Query para Móviles --- */
 @media (max-width: 768px) {
   .top-bar {
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    margin: 0;
-    border-radius: 0;
-    background-color: rgb(230, 230, 230);
-    backdrop-filter: none; 
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
+    background-color: transparent !important;
+    backdrop-filter: none !important;
+    box-shadow: none !important;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end; 
+    height: auto;
+    top: 1em;
+    left: 1em;
+    right: 1em;
   }
-  
+
   .top-bar-left {
+    width: 100%;
     display: flex;
     justify-content: space-between;
-    align-items: center; 
-    width: 100%; 
+    align-items: center;
+    background-color: rgb(230, 230, 230);
+    border-radius: 12px;
+    height: 77px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   }
 
   .top-bar-right {
+    display: none; 
     flex-direction: column;
-    width: 100%;
-    padding-right: 0; 
+    /* Aligns the dropdown container itself to the right */
+    align-items: stretch; 
+    /* This width ensures the rectangle isn't too skinny but fits the text */
+    min-width: 160px; 
+    width: auto;
+    margin-top: 10px;
+    padding: 8px;
+    background-color: rgb(230, 230, 230);
+    border-radius: 12px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   }
-  
+
+  .top-bar.solid .top-bar-right {
+    display: flex;
+  }
+
   .top-bar-item {
     display: none;
-    width: 100%;
-    padding: 1.2em 0; 
-    text-align: center;
-    border: none;
-    background-color: rgb(240, 240, 240); /* Fondo un poco más claro para ítems en móvil */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
-    color: #242424 !important;
-    border-radius: 0;
+    width: 100%; /* Take up the full width of the dropdown */
+    padding: 12px 0; /* Vertical padding only */
+    text-align: center; /* THE FIX: Centers the text */
+    margin-left: 0;
+    font-size: 0.9em;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   }
 
-  /* El botón lila también se muestra como un ítem de menú en móvil */
-  .top-bar-item.btn-highlight {
-      background-color: #8a63d2; 
-      color: rgb(255, 255, 255) !important; 
-      border-bottom: none; /* No necesita borde inferior si es el último */
-  }
-  
-  .top-bar-item:not(.btn-highlight):hover {
-    background-color: rgba(0, 0, 0, 0.05);
+  .top-bar.solid .top-bar-item {
+    display: block;
   }
 
-  /* Eliminar borde inferior del último ítem si no es el botón lila */
-  .top-bar-right .top-bar-item:not(.btn-highlight):last-child {
-      border-bottom: none;
+  .top-bar-item.btn-highlight {
+  background-color: #8a63d2;
+  color: rgb(255, 255, 255) !important;
+  padding: 1em 2em;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  margin-left: 0px;
+}
+
+  /* Remove the bottom border for the last item and the highlight button */
+  .top-bar-item:nth-last-child(2),
+  .top-bar-item.btn-highlight {
+    border-bottom: none;
   }
 
-  /* Mostrar los ítems cuando el menú está abierto */
-  .top-bar-item.visible {
-    display: block;
+  .top-bar-item.btn-highlight {
+    margin-top: 8px;
+    background-color: #8a63d2;
+    color: white !important;
+    border-radius: 8px;
+    padding: 12px 20px;
   }
 
   .mobile-menu {
     display: flex;
-    background-color: transparent; 
-  }
-  
-  .logo {
-    padding-left: 1.5em; 
-    padding-right: 0;
   }
 
-  /* Ocultar selector de idioma y botón circular en móvil si no se usan */
-  .language-selector, .circular-icon-btn {
-      display: none;
+  .logo {
+    max-height: 50px;
+    padding-left: 1em;
   }
 }

src/TopBar.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import aedLogo from '/aed.webp'; 
 import './TopBar.css';
 
-// Componente para el botón de menú hamburguesa (sin cambios)
 const MenuButton = ({ menuOpen, setMenuOpen }) => (
   <div className={`mobile-menu${menuOpen ? ' menu-open' : ''}`} onClick={() => setMenuOpen((prev) => !prev)}>
     <div className='bar' /> 
@@ -17,7 +16,6 @@ MenuButton.propTypes = {
   setMenuOpen: PropTypes.func.isRequired,
 };
 
-// Componente para los ítems de la barra superior
 const TopBarItem = ({ id, children, menuOpen, setMenuOpen, isHighlight = false }) => (
   <a 
     onClick={() => setMenuOpen(false)} 
@@ -32,13 +30,12 @@ TopBarItem.propTypes = {
   children: PropTypes.string.isRequired,
   menuOpen: PropTypes.bool.isRequired,
   setMenuOpen: PropTypes.func.isRequired,
-  isHighlight: PropTypes.bool, // Nueva prop para el botón resaltado
+  isHighlight: PropTypes.bool,
 };
 
-// Componente de la barra superior principal
 function TopBar() {
   const [menuOpen, setMenuOpen] = useState(false);
-  const [selectedLanguage, setSelectedLanguage] = useState('Català'); // Estado para el idioma
+  const [selectedLanguage, setSelectedLanguage] = useState('Català');
 
   return (
     <div className={`top-bar ${menuOpen ? ' solid' : ''}`}>
@@ -50,12 +47,11 @@ function TopBar() {
 
 
 
-        {/* Ítems de navegación normales */}
         <TopBarItem id='' menuOpen={menuOpen} setMenuOpen={setMenuOpen}>Qui som?</TopBarItem>
         <TopBarItem id='objectius' menuOpen={menuOpen} setMenuOpen={setMenuOpen}>Objectius</TopBarItem>
         <TopBarItem id='projectes' menuOpen={menuOpen} setMenuOpen={setMenuOpen}>Projectes</TopBarItem>
         <TopBarItem id='equip' menuOpen={menuOpen} setMenuOpen={setMenuOpen}>Equip</TopBarItem>
-        {/* Botón resaltado con la prop isHighlight */}
+        
         <TopBarItem id='unir-se' menuOpen={menuOpen} setMenuOpen={setMenuOpen} isHighlight>Uneix-te!</TopBarItem>
       </div>
     </div >