blob: 506a934dbac19b8715dc2fbc22e6ea7aaad2849c (
plain)
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
|
import React from "react";
import {
HomeIcon,
EnvelopeIcon,
UserIcon,
BuildingStorefrontIcon,
BriefcaseIcon,
} from "@heroicons/react/24/outline"
const GridLayout = ({ children }) => {
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 ">
<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">
<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 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100">
<UserIcon className="w-8 h-8" />
<button
rel="noopener"
className="mb-1 text-xs font-light">
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">
<BriefcaseIcon className="w-8 h-8" />
<button
rel="noopener"
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">
<BuildingStorefrontIcon className="w-8 h-8" />
<button
rel="noopener"
className="mb-1 text-xs font-light whitespace-nowrap">
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 " />
<button
rel="noopener"
className="mb-1 text-xs font-light">
Messages
</button>
</a>
</nav>
</div>
{/*Middle column */}
<div className="overflow-auto bg-blue-300 h-screen">
{children}
</div>
{/*Right column */}
<div></div>
</div>
);
}
export default GridLayout;
|
