Álvaro Valenzuela Valdes commited on
Commit ·
8a93890
1
Parent(s): 3139b66
🐛 Fix: Mobile menu labels visibility
Browse files- frontend/app/page.tsx +1 -0
- frontend/components/Sidebar.tsx +6 -4
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 [
|
|
|
|
| 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={() =>
|
| 47 |
-
onMouseLeave={() =>
|
| 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'}`}>
|