diff options
author | Jeff <jeffkleinaitis@gmail.com> | 2024-04-17 21:28:45 -0400 |
---|---|---|
committer | Jeff <jeffkleinaitis@gmail.com> | 2024-04-17 21:28:45 -0400 |
commit | 18404d5fc2d39c2cb1796580817b13433ad5e758 (patch) | |
tree | f0c590edc2b7ae227f5b7a98b6ed8cadcf67fe97 /src | |
parent | 6e159b6ea4a879c812a2470cee0e5a6c42e21ee3 (diff) |
feat: Implemented basic grid layout system with working side bar
Diffstat (limited to 'src')
-rw-r--r-- | src/layouts/AuthenticatedLayout.js | 17 | ||||
-rw-r--r-- | src/layouts/GridLayout.js | 72 |
2 files changed, 89 insertions, 0 deletions
diff --git a/src/layouts/AuthenticatedLayout.js b/src/layouts/AuthenticatedLayout.js new file mode 100644 index 0000000..7c39672 --- /dev/null +++ b/src/layouts/AuthenticatedLayout.js @@ -0,0 +1,17 @@ +import React from 'react'; +import Navbar from './components/Navbar'; +import Footer from './components/Footer'; +import PopupWidget from './components/PopupWidget'; + +const AuthenticatedLayout = ({ children }) => { + return ( + <> + <Navbar /> + {children} {/* This will render the content */} + <Footer /> + <PopupWidget /> + </> + ); +}; + +export default AuthenticatedLayout;
\ No newline at end of file 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 |