From 18404d5fc2d39c2cb1796580817b13433ad5e758 Mon Sep 17 00:00:00 2001
From: Jeff <jeffkleinaitis@gmail.com>
Date: Wed, 17 Apr 2024 21:28:45 -0400
Subject: feat: Implemented basic grid layout system with working side bar

---
 src/layouts/GridLayout.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/layouts/GridLayout.js

(limited to 'src/layouts/GridLayout.js')

diff --git a/src/layouts/GridLayout.js b/src/layouts/GridLayout.js
new file mode 100644
index 0000000..a96b351
--- /dev/null
+++ b/src/layouts/GridLayout.js
@@ -0,0 +1,72 @@
+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">01
+            <div>01 asdfasdf</div>
+            </div>
+
+            {/*Right column  */}
+            <div className="bg-green-300">01</div>
+            {children}
+        </div>
+    );
+}
+
+export default GridLayout;
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2