From 7c956f5f9e56de96d8fdf46b7b7f614dc257a26e Mon Sep 17 00:00:00 2001 From: rfhf19 <rfhf19@inf.ufpr.br> Date: Wed, 19 Feb 2025 18:40:37 -0300 Subject: [PATCH] Issue #256: FIX minor interface bugs --- next.config.mjs | 2 +- src/app/components/About.js | 11 ++--- src/app/components/Header.js | 2 +- src/app/components/NavigationBar.js | 62 ++++++++++++++++++----------- 4 files changed, 43 insertions(+), 34 deletions(-) diff --git a/next.config.mjs b/next.config.mjs index 9e3ff882..950d26ac 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -37,7 +37,7 @@ const nextConfig = { { protocol: 'http', hostname: 'mecdb4.c3sl.ufpr.br', - port: '8443', + port: '443', pathname: '/**', }, ], diff --git a/src/app/components/About.js b/src/app/components/About.js index 13625a30..e9bae706 100644 --- a/src/app/components/About.js +++ b/src/app/components/About.js @@ -359,14 +359,9 @@ export default function AboutComponent() { <div className="text-main-text text-lg mt-4 ml-3">Acesse a página de Ajuda e Suporte!</div> <a href="/ajuda" className="mt-4 bg-secondary text-lg text-white p-2 px-4 rounded-lg hover:bg-secondary-hover">Ir para a página de Ajuda</a> </div> - <Link - href="https://gitlab.c3sl.ufpr.br/mecred/frontend-mecred" - className="flex flex-col text-center items-center mt-8 max-md:mt-0" - > - <h6 className="underline text-gray-700 pb-[60px]"> - Versão {packageInfo.version} - </h6> - </Link> + <h6 className="text-center pt-5 text-gray-700 pb-[100px]"> + Versão {packageInfo.version} + </h6> </div> </div> </div> diff --git a/src/app/components/Header.js b/src/app/components/Header.js index 80589e59..929b005f 100644 --- a/src/app/components/Header.js +++ b/src/app/components/Header.js @@ -44,7 +44,7 @@ function DefaultContent({ return ( <> - <div className="grid xl:grid-cols-[150px_auto_500px] md:grid-cols-[150px_auto_300px] grid-cols-[170px_auto] w-full"> + <div className="grid xl:grid-cols-[150px_auto_500px] md:grid-cols-[150px_auto_300px] grid-cols-[170px_auto] max-md:pl-8 w-full"> <Link href="/" className="flex justify-center items-center"> <div className="flex gap-2 justify-center items-center"> <div diff --git a/src/app/components/NavigationBar.js b/src/app/components/NavigationBar.js index 933e6486..54880581 100644 --- a/src/app/components/NavigationBar.js +++ b/src/app/components/NavigationBar.js @@ -6,6 +6,7 @@ import FileUploadIcon from '@mui/icons-material/FileUpload'; import CollectionsBookmarkIcon from "@mui/icons-material/CollectionsBookmark"; import SubjectIcon from "@mui/icons-material/Subject"; import EmailRoundedIcon from '@mui/icons-material/EmailRounded'; +import LogoutRounded from '@mui/icons-material/LogoutRounded'; import HelpIcon from "@mui/icons-material/Help"; import VerifiedIcon from "@mui/icons-material/Verified"; import { Person } from "@mui/icons-material"; @@ -13,7 +14,8 @@ import SearchIcon from '@mui/icons-material/Search'; import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { getStoredValue, -} from "../handlers/localStorageHandler"; + removeFromLocalStorage, + } from "../handlers/localStorageHandler"; export default function NavigationBar({ mobileSearch}) { @@ -39,16 +41,26 @@ export default function NavigationBar({ mobileSearch}) { } }; + const handleLogout = () => { + removeFromLocalStorage("access_token"); + removeFromLocalStorage("user_data"); + removeFromLocalStorage("uid"); + removeFromLocalStorage("expiry"); + removeFromLocalStorage("token-type"); + removeFromLocalStorage("client"); + window.location.reload(); + }; + const navItems = [ { label: "Pesquisar", href: "#", icon: SearchIcon }, { label: "Recursos", href: "/busca?page=LearningObject", icon: SubjectIcon }, { label: "Coleções", href: "/busca?page=Collection", icon: CollectionsBookmarkIcon }, { label: "Publicar", href: "/publicar", icon: FileUploadIcon }, - { label: "Usuários", href: "/busca?page=User", icon: Person }, { label: "MEC", href: "/busca?page=MEC", icon: VerifiedIcon }, { label: "Perfil", href: "/perfil", icon: Person }, { label: "Sobre", href: "/sobre", icon: HelpIcon }, { label: "Contato", href: "/contato", icon: EmailRoundedIcon }, + { label: "Sair", href: "", icon: LogoutRounded}, ] const handleToggleMobileSearch = (e) => { @@ -62,10 +74,11 @@ export default function NavigationBar({ mobileSearch}) { <nav className="bg-navbar h-50 outline outline-1 outline-outlineColor text-text-color font-light fixed bottom-0 left-0 w-full z-10"> <ul className="flex justify-between overflow-x-auto no-scrollbar animate-scrollHint"> - {navItems.map((item, index) => { + {navItems.map((item, index) => { const isPublishRoute = item.href === "/publicar"; const isPerfilRoute = item.href === "/perfil"; const isSearchButton = item.label === "Pesquisar"; + const isLogout = item.label === "Sair"; const isActive = (page === item.href.split("page=")[1]) || @@ -74,29 +87,30 @@ export default function NavigationBar({ mobileSearch}) { return ( <li key={index} className="flex w-20 flex-col items-center justify-center p-3"> - <a - href={ - isPublishRoute ? (isLoggedIn() ? "/publicar" : "") : - isPerfilRoute ? (isLoggedIn() ? `/perfil/${id}` : "") : - item.href - } - onClick={ - isPublishRoute || isPerfilRoute ? (e) => handleOpenLoggin(e) : - isSearchButton ? (e) => handleToggleMobileSearch(e) : - undefined - } - className={`text-center rounded-md transition-all ${ - isActive ? "font-bold text-black" : "" - }`} - > - <item.icon className={`cursor-pointer text-3xl ${isActive ? "text-black font-bold" : ""}`} /> - <span className={`cursor-pointer text-xs ${isActive ? "text-black font-bold" : ""}`}> - {item.label} - </span> - </a> + <a + href={isLogout ? "#" : ( + isPublishRoute ? (isLoggedIn() ? "/publicar" : "") : + isPerfilRoute ? (isLoggedIn() ? `/perfil/${id}` : "") : + item.href + )} + onClick={ + isLogout ? (e) => { e.preventDefault(); handleLogout(); } : + isPublishRoute || isPerfilRoute ? (e) => handleOpenLoggin(e) : + isSearchButton ? (e) => handleToggleMobileSearch(e) : + undefined + } + className={`text-center rounded-md transition-all ${ + isActive ? "font-bold text-black" : "" + }`} + > + <item.icon className={`cursor-pointer text-3xl ${isActive ? "text-black font-bold" : ""}`} /> + <span className={`cursor-pointer text-xs ${isActive ? "text-black font-bold" : ""}`}> + {item.label} + </span> + </a> </li> ); - })} + })} </ul> </nav> </> -- GitLab