diff options
Diffstat (limited to 'src/layouts/GridLayout.js')
| -rw-r--r-- | src/layouts/GridLayout.js | 68 |
1 files changed, 56 insertions, 12 deletions
diff --git a/src/layouts/GridLayout.js b/src/layouts/GridLayout.js index 506a934..b2b61df 100644 --- a/src/layouts/GridLayout.js +++ b/src/layouts/GridLayout.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, {useEffect, useState} from "react"; import { HomeIcon, EnvelopeIcon, @@ -8,13 +8,34 @@ import { } from "@heroicons/react/24/outline" const GridLayout = ({ children }) => { + + const [selectedPage, setSelectedPage] = useState(() => { + const storedPage = localStorage.getItem('selectedPage'); + return storedPage ? storedPage : 'home'; + }); + + useEffect(() => { + localStorage.setItem('selectedPage', selectedPage); + }, [selectedPage]); + + const handlePageClick = (page) => { + setSelectedPage(page); + }; + + return ( - <div className="container px-8 mx-auto grid grid-cols-[96px,1fr,96px] gap-10"> + <div className="container px-8 mx-auto grid md:grid-cols-[96px,1fr] lg:grid-cols-[96px,1fr,96px] gap-10"> {/*Left column - sticky */} - <div className="self-start sticky top-0 col-span-1 pt-8 "> - <nav className="p-2 "> - <a href="/" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100"> + <div className="max-md:hidden self-start sticky top-0 col-span-1 pt-8 text-trueGray-500 "> + <nav className=""> + <a + href="/" + className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${ + selectedPage === 'home' ? 'bg-indigo-50 text-indigo-500' : '' + }`} + onClick={() => handlePageClick('home')} + > <HomeIcon className="w-8 h-8" /> <button rel="noopener" @@ -22,7 +43,13 @@ const GridLayout = ({ children }) => { Home </button> </a> - <a href="/profile" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100"> + <a + href="/profile" + className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${ + selectedPage === 'profile' ? 'bg-indigo-50 text-indigo-500' : '' + }`} + onClick={() => handlePageClick('profile')} + > <UserIcon className="w-8 h-8" /> <button rel="noopener" @@ -30,15 +57,27 @@ const GridLayout = ({ children }) => { Profile </button> </a> - <a href="/volunteer" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100"> + <a + href="/find-opportunities" + className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${ + selectedPage === 'find-opportunities' ? 'bg-indigo-50 text-indigo-500' : '' + }`} + onClick={() => handlePageClick('find-opportunities')} + > <BriefcaseIcon className="w-8 h-8" /> <button rel="noopener" - className="mb-1 text-xs font-light whitespace-nowrap"> + className="mb-1 text-xs font-light whitespace-nowrap"> Find Opportunities </button> </a> - <a href="/volunteer" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100"> + <a + href="/recruit-volunteers" + className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${ + selectedPage === 'recruit-volunteers' ? 'bg-indigo-50 text-indigo-500' : '' + }`} + onClick={() => handlePageClick('recruit-volunteers')} + > <BuildingStorefrontIcon className="w-8 h-8" /> <button rel="noopener" @@ -46,8 +85,13 @@ const GridLayout = ({ children }) => { Recruit Volunteers </button> </a> - <a href="/" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100"> - <EnvelopeIcon className="w-8 h-8 " /> + <a + href="/messages" + className={`flex items-center flex-col mb-4 hover:text-indigo-500 p-1 rounded ${ + selectedPage === 'messages' ? 'bg-indigo-50 text-indigo-500' : '' + }`} + onClick={() => handlePageClick('messages')} + > <EnvelopeIcon className="w-8 h-8 " /> <button rel="noopener" className="mb-1 text-xs font-light"> @@ -58,7 +102,7 @@ const GridLayout = ({ children }) => { </div> {/*Middle column */} - <div className="overflow-auto bg-blue-300 h-screen"> + <div className="overflow-auto h-screen"> {children} </div> |