From 1ecc12adbd9e00c941a21faac00d61722194168e Mon Sep 17 00:00:00 2001
From: Xavier Oliveira <xaviergomesoliveira@gmail.com>
Date: Thu, 28 May 2026 16:42:36 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20fechar=20offcanvas=20ao=20clicar=20em=20?=
 =?UTF-8?q?link=20e=20corrigir=20navega=C3=A7=C3=A3o=20com=20NavLink?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/header/index.tsx           | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend-plataforma-tutoriais/src/components/header/index.tsx b/frontend-plataforma-tutoriais/src/components/header/index.tsx
index 2702af8..5689edd 100644
--- a/frontend-plataforma-tutoriais/src/components/header/index.tsx
+++ b/frontend-plataforma-tutoriais/src/components/header/index.tsx
@@ -2,8 +2,8 @@ import API_URL from "../../config/api";
 import styles from "./styles.module.css";
 import { LuUser, LuMenu, LuSearch, LuLogOut, LuUsers, LuMail, LuGraduationCap, LuTvMinimalPlay, LuLayoutDashboard, LuCircleUser, LuPanelLeftClose, LuClock3, LuCalendar } from "react-icons/lu";
 import { useEffect, useState } from "react";
-import { useNavigate, Link } from "react-router";
-import { Button, NavLink, Offcanvas } from "react-bootstrap";
+import { useNavigate, Link, NavLink } from "react-router";
+import { Button, Offcanvas } from "react-bootstrap";
 import type { Workshop } from "../../types";
 import type { Video } from "../../types";
 import { CgSpinner } from "react-icons/cg";
@@ -135,8 +135,7 @@ export default function Header() {
                                     className={styles.logo}
                                     src="/src/assets/logo.png"
                                     alt="Logo"
-                                    style={imageSkeletonFadeStyle}
-                                    onLoad={onImageSkeletonLoad}
+                                    onClick={handleCloseMenu}
                                 />
                             </Link>
                             <button type="button" className={`${styles.sidebarClose} align-items-center justify-content-center d-xl-none`} onClick={handleCloseMenu}> <LuPanelLeftClose size={24} /> </button>
@@ -147,21 +146,21 @@ export default function Header() {
                         <nav className={`${styles.nav} flex-grow-1`}>
                             <ul className={styles.navList}>
                                 <li className={`${styles.navItem} text-start`}>
-                                    <NavLink className={styles.navLink} href="/dashboard"> <LuLayoutDashboard className="me-2" size={24} />Dashboard</NavLink>
+                                    <NavLink className={styles.navLink} to="/dashboard" onClick={handleCloseMenu}> <LuLayoutDashboard className="me-2" size={24} />Dashboard</NavLink>
                                 </li>
                                 <li className={`${styles.navItem} text-start`}>
-                                    <NavLink className={styles.navLink} href="/videos"> <LuTvMinimalPlay className="me-2" size={24} />Videos</NavLink>
+                                    <NavLink className={styles.navLink} to="/videos" onClick={handleCloseMenu}> <LuTvMinimalPlay className="me-2" size={24} />Videos</NavLink>
                                 </li>
                                 <li className={`${styles.navItem} text-start`}>
-                                    <NavLink className={styles.navLink} href="/workshops"> <LuGraduationCap className="me-2" size={24} />Workshops</NavLink>
+                                    <NavLink className={styles.navLink} to="/workshops" onClick={handleCloseMenu}> <LuGraduationCap className="me-2" size={24} />Workshops</NavLink>
                                 </li>
                                 {role === 1 && (
                                     <li className={`${styles.navItem} text-start`}>
-                                        <NavLink className={styles.navLink} href="/admin/users"> <LuUsers className="me-2" size={24} />Utilizadores</NavLink>
+                                        <NavLink className={styles.navLink} to="/admin/users" onClick={handleCloseMenu}> <LuUsers className="me-2" size={24} />Utilizadores</NavLink>
                                     </li>
                                 )}
                                 <li className={`${styles.navItem} text-start`}>
-                                    <NavLink className={styles.navLink} href="/contactos"> <LuMail className="me-2" size={24} />Contactos</NavLink>
+                                    <NavLink className={styles.navLink} to="/contactos" onClick={handleCloseMenu}> <LuMail className="me-2" size={24} />Contactos</NavLink>
                                 </li>
                             </ul>
                         </nav>
@@ -329,7 +328,7 @@ export default function Header() {
                                     className="dropdown-menu dropdown-menu-end"
                                     style={{  display: "block", zIndex: 2000, right: 0, top: "100%", marginTop: "0.25rem" }}>
                                     <li><Link className="dropdown-item" to="/profile"><LuCircleUser className="mb-1 me-2" size={24} />A minha conta</Link></li>
-                                    <li><a className="dropdown-item mt-2" href="/logout" style={{ color: "var(--text-primary-color)" }}> <LuLogOut className="mb-1 me-2" size={24} />Sair</a></li>
+                                    <li><Link className="dropdown-item mt-2" to="/logout" style={{ color: "var(--text-primary-color)" }}> <LuLogOut className="mb-1 me-2" size={24} />Sair</Link></li>
                                 </motion.ul>
                             )}
                         </AnimatePresence>