diff --git a/src/assets/css/tailwind.presets.min.css b/src/assets/css/tailwind.presets.min.css
index fce319fcd43ed4c4732eea929ebd3f939a052ea6..130dc89a9acb85d53355c1d14d5b2aa3620a3101 100644
--- a/src/assets/css/tailwind.presets.min.css
+++ b/src/assets/css/tailwind.presets.min.css
@@ -1 +1 @@
-@tailwind base;@tailwind components;@tailwind utilities/*# sourceMappingURL=tailwind.presets.min.css.map */
\ No newline at end of file
+@tailwind base;@tailwind components;@tailwind utilities;@layer base{img,svg,video,canvas,audio,iframe,embed,object{display:inline;vertical-align:middle}}/*# sourceMappingURL=tailwind.presets.min.css.map */
\ No newline at end of file
diff --git a/src/assets/css/tailwind.presets.min.css.map b/src/assets/css/tailwind.presets.min.css.map
index 8c4ad4ffcad6bda4abf25eec01b5dbd4bf7b7ff3..21d66c4d5130ef65b09d4e888d296ade96c3146a 100644
--- a/src/assets/css/tailwind.presets.min.css.map
+++ b/src/assets/css/tailwind.presets.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../sass/tailwind.presets.scss"],"names":[],"mappings":"AAAA,cAAA,CACA,oBAAA,CACA","file":"tailwind.presets.min.css"}
\ No newline at end of file
+{"version":3,"sources":["../sass/tailwind.presets.scss"],"names":[],"mappings":"AAAA,cAAA,CACA,oBAAA,CACA,mBAAA,CAEA,YACE,+CAQE,cAAA,CACA,qBAAA,CAAA","file":"tailwind.presets.min.css"}
\ No newline at end of file
diff --git a/src/assets/sass/tailwind.presets.scss b/src/assets/sass/tailwind.presets.scss
index b5c61c956711f981a41e95f7fcf0038436cfbb22..d184c0b6bbc333d23a5d0c98bbbbe1c20c4ea98b 100644
--- a/src/assets/sass/tailwind.presets.scss
+++ b/src/assets/sass/tailwind.presets.scss
@@ -1,3 +1,17 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@layer base {
+ img,
+ svg,
+ video,
+ canvas,
+ audio,
+ iframe,
+ embed,
+ object {
+ display: inline;
+ vertical-align: middle;
+ }
+}
diff --git a/src/layouts/MainLayout.jsx b/src/layouts/MainLayout.jsx
index b8f161e4d58c86c81a918cd183901e6633cebcfd..7a3abbaed2db25e27b2367bb7297f01af742b6ba 100644
--- a/src/layouts/MainLayout.jsx
+++ b/src/layouts/MainLayout.jsx
@@ -1,6 +1,8 @@
import React from 'react';
import { Outlet } from 'react-router-dom';
import Header from './partials/Header';
+import Subheader from './partials/subheader/Subheader';
+
function MainLayout() {
// #################################
@@ -17,7 +19,11 @@ function MainLayout() {
return (
<>
<Header />
- <Outlet />
+ <Subheader />
+ <main role="main" className="relative row-start-2 col-span-full flex sm:justify-center overflow-y-auto sm:row-start-4">
+ <Outlet />
+ </main>
+ <div>Navbar</div>
</>
);
}
diff --git a/src/layouts/partials/subheader/Breadcrumbs.jsx b/src/layouts/partials/subheader/Breadcrumbs.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..48a0dadc0f21695217e112180e8bf65481a5ddd3
--- /dev/null
+++ b/src/layouts/partials/subheader/Breadcrumbs.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { RiArrowDropRightLine, RiHome2Line } from 'react-icons/ri';
+import { useMatches } from 'react-router-dom';
+
+function Breadcrumbs() {
+ // #################################
+ // HOOKS
+ // #################################
+ let matches = useMatches();
+
+ // #################################
+ // FUNCTIONS
+ // #################################
+ let crumbs = matches
+ // get rid of any matches that don't have handle and crumb
+ .filter((match) => Boolean(match.handle?.crumb));
+
+ // #################################
+ // OUTPUT
+ // #################################
+ return (
+
+ <div className="h-0 overflow-hidden sm:h-6 px-4 my-2 container sm:flex justify-between">
+ <ul className="flex">
+ {
+ // map crumbs into an array of elements, passing the loader data to each one
+ // TODO: find out how to render result of .map, then move into functions-section and render ${crumbs} in here
+ crumbs.map((match, idx) =>
+ <li key={`bc-${idx}`}>
+ {/* show home icon on first item, others will display split img */}
+ {idx === 0 ? <RiHome2Line className='text-xl mr-1' /> : <RiArrowDropRightLine className='text-2xl mx-4' />}
+ {/* render handle.crumb callback */}
+ {match.handle.crumb(match.data)}
+ </li>)
+ }
+ </ul>
+ </div>
+ );
+}
+
+export default React.memo(Breadcrumbs);;
\ No newline at end of file
diff --git a/src/layouts/partials/subheader/Subheader.jsx b/src/layouts/partials/subheader/Subheader.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..2c4f0204bc64aa8dad016f9ea0c60a3b7897af71
--- /dev/null
+++ b/src/layouts/partials/subheader/Subheader.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Breadcrumbs from './Breadcrumbs';
+
+function Subheader() {
+ // #################################
+ // HOOKS
+ // #################################
+
+
+ // #################################
+ // FUNCTIONS
+ // #################################
+
+
+ // #################################
+ // OUTPUT
+ // #################################
+ return (
+ <div className='group flex justify-center box-border shadow-md z-20 h-0 open:h-10 sm:h-10 transform transition-all overflow-hidden row-start-2 sm:row-start-3 col-span-full text-sm bg-UhhWhite'>
+ <div className="container flex justify-center flex-wrap">
+ <Breadcrumbs />
+ </div>
+ </div>
+ );
+}
+
+export default React.memo(Subheader);
\ No newline at end of file
diff --git a/src/pages/Onboarding/Onboarding.jsx b/src/pages/Onboarding/Onboarding.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..d9dd41470e023d38c843394df8fd6b94b304925a
--- /dev/null
+++ b/src/pages/Onboarding/Onboarding.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+function Onboarding() {
+ // #################################
+ // HOOKS
+ // #################################
+
+ // #################################
+ // FUNCTIONS
+ // #################################
+
+ // #################################
+ // OUTPUT
+ // #################################
+ return (
+ <div>TEST Onboarding</div>
+ );
+}
+
+export default React.memo(Onboarding);
\ No newline at end of file
diff --git a/src/routes/Sitemap.jsx b/src/routes/Sitemap.jsx
index 205ac308699aa949326cb49f0f849dae82063ad1..3d0fe9a5f9e25ef3adbdf19d21cd7c0808a6d0ee 100644
--- a/src/routes/Sitemap.jsx
+++ b/src/routes/Sitemap.jsx
@@ -1,13 +1,27 @@
import MainLayout from "../layouts/MainLayout";
-import Home from "../pages/Home";
+import { loadComponent } from "./WrapRoutes";
+import { Link } from 'react-router-dom';
-export const sitemap = [
- {
- title: 'MenuBar', element: <MainLayout />,
- children: [
- {
- title: 'Home', path: '/', element: <Home />
- }
- ]
- }
-];
\ No newline at end of file
+export const sitemap = [{
+ title: 'MenuBar', element: <MainLayout />,
+ children: [
+ {
+ title: 'Home',
+ path: '/',
+ handle: { crumb: () => <Link to="/">ZBH Portal</Link> },
+ children: [
+ {
+ index: true,
+ element: loadComponent('Home', true, true)
+ },
+ // ONBOARDING
+ {
+ title: 'Onboarding',
+ path: '/onboarding',
+ element: loadComponent('Onboarding/Onboarding', true, true),
+ handle: { crumb: () => <Link to="/onboarding">Onboarding</Link> }
+ }
+ ]
+ }
+ ]
+}];
\ No newline at end of file
diff --git a/src/routes/WrapRoutes.jsx b/src/routes/WrapRoutes.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c9c8fc0acb3d42dc385f17304516c2818ef1766
--- /dev/null
+++ b/src/routes/WrapRoutes.jsx
@@ -0,0 +1,23 @@
+import { lazy, Suspense } from 'react';
+
+/**
+ * Lazily load the mentioned component which resides in the page directory
+ * This method will be used in routes so that the files are loaded only
+ * When users are on that route
+ */
+export function loadComponent(componentPath, lazyLoad, privateRoute) {
+
+ lazyLoad = typeof lazyLoad !== "undefined" ? lazyLoad : true;
+
+ // It is not possible to use a fully dynamic import statement, such as import(foo). Because foo could potentially be any path to any file in your system or project.
+ // The import() must contain at least some information about where the module is located.
+
+ const Component = lazyLoad ? lazy(() => import(/* @vite-ignore */`../pages/${componentPath}`)) : import(/* @vite-ignore */`../pages/${componentPath}`);
+
+
+
+ let element = lazyLoad ? <Suspense fallback={<span>Loading...</span>}><Component /></Suspense> : <Component />;
+
+ // Wrapping around the suspense component is mandatory
+ return element;
+}
\ No newline at end of file