XavierOliveira/Plataforma-de-Tutoriais
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fechar offcanvas ao clicar em link e corrigir navegação com NavLink

Browse Source
This commit is contained in:
Xavier Oliveira
2026-05-28 16:42:36 +01:00
parent 9986c2f66d
commit 1ecc12adbd
1 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend-plataforma-tutoriais/src/components/header/index.tsx
View File

@@ -2,8 +2,8 @@ import API_URL from "../../config/api";
import styles from "./styles.module.css"; 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 { LuUser, LuMenu, LuSearch, LuLogOut, LuUsers, LuMail, LuGraduationCap, LuTvMinimalPlay, LuLayoutDashboard, LuCircleUser, LuPanelLeftClose, LuClock3, LuCalendar } from "react-icons/lu";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate, Link } from "react-router"; import { useNavigate, Link, NavLink } from "react-router";
import { Button, NavLink, Offcanvas } from "react-bootstrap"; import { Button, Offcanvas } from "react-bootstrap";
import type { Workshop } from "../../types"; import type { Workshop } from "../../types";
import type { Video } from "../../types"; import type { Video } from "../../types";
import { CgSpinner } from "react-icons/cg"; import { CgSpinner } from "react-icons/cg";
@@ -135,8 +135,7 @@ export default function Header() {
className={styles.logo} className={styles.logo}
src="/src/assets/logo.png" src="/src/assets/logo.png"
alt="Logo" alt="Logo"
style={imageSkeletonFadeStyle} onClick={handleCloseMenu}
onLoad={onImageSkeletonLoad}
/> />
</Link> </Link>
<button type="button" className={`${styles.sidebarClose} align-items-center justify-content-center d-xl-none`} onClick={handleCloseMenu}> <LuPanelLeftClose size={24} /> </button> <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`}> <nav className={`${styles.nav} flex-grow-1`}>
<ul className={styles.navList}> <ul className={styles.navList}>
<li className={`${styles.navItem} text-start`}> <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>
<li className={`${styles.navItem} text-start`}> <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>
<li className={`${styles.navItem} text-start`}> <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> </li>
{role === 1 && ( {role === 1 && (
<li className={`${styles.navItem} text-start`}> <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>
)} )}
<li className={`${styles.navItem} text-start`}> <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> </li>
</ul> </ul>
</nav> </nav>
@@ -329,7 +328,7 @@ export default function Header() {
className="dropdown-menu dropdown-menu-end" className="dropdown-menu dropdown-menu-end"
style={{ display: "block", zIndex: 2000, right: 0, top: "100%", marginTop: "0.25rem" }}> 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><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> </motion.ul>
)} )}
</AnimatePresence> </AnimatePresence>