diff options
Diffstat (limited to 'src/layouts/GridLayout.js')
-rw-r--r-- | src/layouts/GridLayout.js | 72 |
1 files changed, 72 insertions, 0 deletions
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 |