Merge pull request #29 from digadoo/developHEADmain

04/25 PR: New pages, state added to sidebar items, and a structure for displaying tasks

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>