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