Álvaro Valenzuela Valdes commited on
Commit
8a93890
·
1 Parent(s): 3139b66

🐛 Fix: Mobile menu labels visibility

Browse files
frontend/app/page.tsx CHANGED
@@ -185,6 +185,7 @@ export default function HomePage() {
185
  }}
186
  status={status}
187
  lang={lang}
 
188
  />
189
  </div>
190
  </div>
 
185
  }}
186
  status={status}
187
  lang={lang}
188
+ forceExpanded={isMobileMenuOpen}
189
  />
190
  </div>
191
  </div>
frontend/components/Sidebar.tsx CHANGED
@@ -20,11 +20,13 @@ type Props = {
20
  onTabSelect: Dispatch<SetStateAction<SidebarTab>>;
21
  status: string;
22
  lang: Language;
 
23
  };
24
 
25
- export default function Sidebar({ tabs, activeTab, onTabSelect, status, lang }: Props) {
26
  const t = translations[lang];
27
- const [isExpanded, setIsExpanded] = useState(false);
 
28
 
29
  const getTabLabel = (tab: SidebarTab) => {
30
  switch(tab) {
@@ -43,8 +45,8 @@ export default function Sidebar({ tabs, activeTab, onTabSelect, status, lang }:
43
 
44
  return (
45
  <aside
46
- onMouseEnter={() => setIsExpanded(true)}
47
- onMouseLeave={() => setIsExpanded(false)}
48
  className={`glass-card rounded-3xl h-[calc(100vh-3rem)] sticky top-6 p-4 flex flex-col gap-8 transition-all duration-500 ease-in-out z-50 border-white/10 ${isExpanded ? 'w-72 shadow-2xl shadow-purple-500/10 bg-black/60' : 'w-[84px] shadow-none border-white/5 bg-white/[0.02]'}`}
49
  >
50
  <div className={`flex items-center gap-3 px-2 transition-all duration-300 ${isExpanded ? 'justify-start' : 'justify-center'}`}>
 
20
  onTabSelect: Dispatch<SetStateAction<SidebarTab>>;
21
  status: string;
22
  lang: Language;
23
+ forceExpanded?: boolean;
24
  };
25
 
26
+ export default function Sidebar({ tabs, activeTab, onTabSelect, status, lang, forceExpanded = false }: Props) {
27
  const t = translations[lang];
28
+ const [isHovered, setIsHovered] = useState(false);
29
+ const isExpanded = forceExpanded || isHovered;
30
 
31
  const getTabLabel = (tab: SidebarTab) => {
32
  switch(tab) {
 
45
 
46
  return (
47
  <aside
48
+ onMouseEnter={() => setIsHovered(true)}
49
+ onMouseLeave={() => setIsHovered(false)}
50
  className={`glass-card rounded-3xl h-[calc(100vh-3rem)] sticky top-6 p-4 flex flex-col gap-8 transition-all duration-500 ease-in-out z-50 border-white/10 ${isExpanded ? 'w-72 shadow-2xl shadow-purple-500/10 bg-black/60' : 'w-[84px] shadow-none border-white/5 bg-white/[0.02]'}`}
51
  >
52
  <div className={`flex items-center gap-3 px-2 transition-all duration-300 ${isExpanded ? 'justify-start' : 'justify-center'}`}>