Issue #288: UPDATE change order icons sidebar

src/app/components/NavigationBar.js

@@ -53,12 +53,12 @@ export default function NavigationBar({ mobileSearch}) {
 
     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: "MEC", href: "/busca?page=MEC", icon: VerifiedIcon },
         { label: "Perfil", href: "/perfil", icon: Person },
+        { label: "Coleções", href: "/busca?page=Collection", icon: CollectionsBookmarkIcon },
+        { label: "Recursos", href: "/busca?page=LearningObject", icon: SubjectIcon },
         { label: "Sobre", href: "/sobre", icon: HelpIcon },
+        { label: "MEC", href: "/busca?page=MEC", icon: VerifiedIcon },
+        { label: "Publicar", href: "/publicar", icon: FileUploadIcon },
         { label: "Contato", href: "/contato", icon: EmailRoundedIcon },
         { label: "Sair", href: "", icon: LogoutRounded},
     ]

src/app/components/Overlay.js

@@ -89,7 +89,7 @@ export default function Overlay({
               <div
                 className="grid w-full  pt-[160px] h-dvh text-base 2xl:grid-cols-[150px_minmax(0,1fr)_500px] xl:grid-cols-[150px_minmax(0,1fr)_400px] grid-cols-[150px_minmax(0,1fr)]"
               >
-                <div className="min-h-0">
+                <div className="min-h-0 overflow-y-auto">
                   <SideBar setFilterState={setFilterState} filterState={filterState} />
                 </div>
                 {children}

src/app/components/SideBar.js

@@ -12,8 +12,10 @@ import { Person } from "@mui/icons-material";
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 import { isLoggedIn } from "../handlers/loginHandler";
 import NeedLoginModal from "./needLoginModal";
+import LogoutRounded from '@mui/icons-material/LogoutRounded';
 import {
   getStoredValue,
+  removeFromLocalStorage,
 } from "../handlers/localStorageHandler";
 
 /**
@@ -24,18 +26,11 @@ import {
 
 const acessoRapido = [
   {
-    title: "Publicar",
-    icon: FileUploadIcon,
-    href: "/publicar",
-    id: "Publicar Recurso",
-  },
-  {
-    title: "MEC",
-    icon: VerifiedIcon,
-    href: "MEC",
-    id: "MEC",
+    title: "Meu perfil",
+    icon: Person,
+    href: "/perfil",
+    id: "Perfil",
   },
-
   {
     title: "Coleções",
     icon: CollectionsBookmarkIcon,
@@ -48,23 +43,35 @@ const acessoRapido = [
     href: "LearningObject",
     id: "Recursos",
   },
-  {
-    title: "Perfil",
-    icon: Person,
-    href: "/perfil",
-    id: "Perfil",
-  },
   {
     title: "Sobre",
     icon: HelpIcon,
     href: "/sobre",
     id: "Sobre",
   },
+  {
+    title: "MEC",
+    icon: VerifiedIcon,
+    href: "MEC",
+    id: "MEC",
+  },
+  {
+    title: "Publicar",
+    icon: FileUploadIcon,
+    href: "/publicar",
+    id: "Publicar Recurso",
+  },
   {
     title: "Contato",
     icon: EmailRoundedIcon,
     href: "/contato",
     id: "Contato",
+  },
+  {
+    title: "Sair",
+    icon: LogoutRounded,
+    href: "/sobre",
+    id: "sobre",
   }
 ];
 
@@ -110,6 +117,16 @@ export default function SideBar({ setFilterState, filterState }) {
 
   const [needLoginOpen, setNeedLoginOpen] = useState(false);  
 
+  const handleLogout = () => {    
+    removeFromLocalStorage("access_token");
+    removeFromLocalStorage("user_data");
+    removeFromLocalStorage("uid");
+    removeFromLocalStorage("expiry");
+    removeFromLocalStorage("token-type");
+    removeFromLocalStorage("client");
+    window.location.reload();    
+  }
+
 
   const handleOpenLogin = () => {
 
@@ -132,18 +149,24 @@ export default function SideBar({ setFilterState, filterState }) {
       <NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
 
       <div className="max-md:hidden min-h-0 overflow-y-auto flex flex-col text-darkGray-HC-white-underline font-light">
-        <div className="flex flex-col justify-start items-center gap-3 w-full ">
+        <div className="flex flex-col justify-start items-center gap-3 w-full mb-5">
           {acessoRapido
-          .filter(item => isLoggedIn() || item.href !== "/perfil")
+          .filter(item => isLoggedIn() || (item.title !== "Sair" && item.href !== "/perfil"))
           .map((item, index) => {
             return (
               <Link
-                onClick={item.href === "/publicar" ? handleOpenLogin : () => { }}
+                onClick={() => {
+                  if (item.title === "Sair") {
+                    handleLogout();
+                  } else if (item.href === "/publicar" && !isLoggedIn()) {
+                    handleOpenLogin();
+                  }
+                }}
                 href={item.href === "/publicar" ? (isLoggedIn() ? "/publicar" : "") : getHref(item.href)}
                 key={index}
                 alt={item.title}
                 title={item.title}
-                className={`aspect-square cursor-pointer hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline focus:bg-lightGray-HC-white  text-center rounded-lg pt-2 w-[80px]
+                className={`aspect-square cursor-pointer hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline focus:bg-lightGray-HC-white text-center rounded-lg pt-2 w-[88px]
                   ${(page === item.href) || (pathname.startsWith(item.href)) ? "bg-lightGray-HC-white text-darkGray-HC-dark-underline font-bold" : ""}
                 `}
               >