1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
import React, {useEffect, useState} from "react";
import {
HomeIcon,
EnvelopeIcon,
UserIcon,
BuildingStorefrontIcon,
BriefcaseIcon,
} 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">
{/*Left column - sticky */}
<div className="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"
className="mb-1 text-xs font-light">
Home
</button>
</a>
<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"
className="mb-1 text-xs font-light">
Profile
</button>
</a>
<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">
Find Opportunities
</button>
</a>
<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"
className="mb-1 text-xs font-light whitespace-nowrap">
Recruit Volunteers
</button>
</a>
<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">
Messages
</button>
</a>
</nav>
</div>
{/*Middle column */}
<div className="overflow-auto h-screen">
{children}
</div>
{/*Right column */}
<div></div>
</div>
);
}
export default GridLayout;
|
