Skip to content
Snippets Groups Projects
Commit c3fac169 authored by Embruch, Gerd's avatar Embruch, Gerd
Browse files

added clean layout, helmet & 404-page

parent 9e9bd26c
No related branches found
No related tags found
No related merge requests found
.env 0 → 100644
VITE_APP_NAME=ZBH Portal
VITE_PAGE_AFTER_LOGIN=/
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"hamburger-react": "^2.5.1", "hamburger-react": "^2.5.1",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-helmet-async": "^2.0.5",
"react-icons": "^5.2.1", "react-icons": "^5.2.1",
"react-router-dom": "^6.24.0" "react-router-dom": "^6.24.0"
}, },
...@@ -3550,6 +3551,15 @@ ...@@ -3550,6 +3551,15 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/invariant": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/is-array-buffer": { "node_modules/is-array-buffer": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
...@@ -4935,6 +4945,26 @@ ...@@ -4935,6 +4945,26 @@
"react": "^18.3.1" "react": "^18.3.1"
} }
}, },
"node_modules/react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
"license": "MIT"
},
"node_modules/react-helmet-async": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
"integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
"license": "Apache-2.0",
"dependencies": {
"invariant": "^2.2.4",
"react-fast-compare": "^3.2.2",
"shallowequal": "^1.1.0"
},
"peerDependencies": {
"react": "^16.6.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-icons": { "node_modules/react-icons": {
"version": "5.2.1", "version": "5.2.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
...@@ -5281,6 +5311,12 @@ ...@@ -5281,6 +5311,12 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
"license": "MIT"
},
"node_modules/shebang-command": { "node_modules/shebang-command": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"hamburger-react": "^2.5.1", "hamburger-react": "^2.5.1",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-helmet-async": "^2.0.5",
"react-icons": "^5.2.1", "react-icons": "^5.2.1",
"react-router-dom": "^6.24.0" "react-router-dom": "^6.24.0"
}, },
......
import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { sitemap } from "./routes/Sitemap"; import { sitemap } from "./routes/Sitemap";
import { HelmetProvider } from 'react-helmet-async';
function App() { function App() {
let pages = createBrowserRouter(sitemap); let pages = createBrowserRouter(sitemap);
return ( return (
<HelmetProvider>
<RouterProvider router={pages} /> <RouterProvider router={pages} />
</HelmetProvider>
); );
} }
......
import React, { useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import Header from './partials/Header';
function CleanLayout() {
// #################################
// HOOKS
// #################################
// SET BODY CLASSES
useEffect(() => {
// ### on run exec this code
document.body.className = '';
document.body.classList.add('overflow-x-hidden', 'h-full', 'flex', 'justify-center', 'relative');
document.getElementById('root').classList.remove('grid-rows-[auto_1fr_auto]', 'min-h-full', 'w-screen', 'max-h-full', 'sm:grid-rows-[auto_auto_auto_1fr]');
document.getElementById('root').classList.add('grid-rows-[auto_1fr]', 'h-full');
}, []);
// #################################
// FUNCTIONS
// #################################
// #################################
// OUTPUT
// #################################
return (
<>
<div className="grid grid-cols-1 grid-rows-[auto_1fr] h-full min-w-xs text-UhhGrey">
<Header layout="clean" />
<main role="main">
<div className="box-border overflow-x-hidden overflow-y-auto px-4 mt-2 ">
<div>
<Outlet />
</div>
</div>
</main>
</div>
</>
);
}
export default React.memo(CleanLayout);
\ No newline at end of file
import React from 'react';
import { Helmet } from 'react-helmet-async';
import { useNavigate } from "react-router-dom";
function Err404() {
// #################################
// HOOKS
// #################################
const redirect = useNavigate();
// #################################
// FUNCTIONS
// #################################
function handleClick(event) {
event.preventDefault();
redirect(-1);
}
// #################################
// OUTPUT
// #################################
return (
<>
{/* render page title */}
<Helmet><title>[{import.meta.env.VITE_APP_NAME}] Error</title></Helmet>
<h1 className="text-8xl text-center text-UhhGrey">404</h1>
<h2>Page not found</h2>
<p className="mt-8">We're sorry for the inconvenience, but we can lead you</p>
<span className="inline-block w-full h-16 px-8 mb-4 border-box leading-[4rem] text-center align-middle bg-UhhBlue text-UhhWhite font-UhhBC cursor-pointer" onClick={handleClick}>back</span>
</>
);
}
export default React.memo(Err404);
import MainLayout from "../layouts/MainLayout"; import MainLayout from "../layouts/MainLayout";
import { loadComponent } from "./WrapRoutes"; import { loadComponent } from "./WrapRoutes";
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import CleanLayout from '../layouts/CleanLayout';
export const sitemap = [{ export const sitemap = [{
title: 'MenuBar', element: <MainLayout />, title: 'MenuBar', element: <MainLayout />,
...@@ -24,4 +26,9 @@ export const sitemap = [{ ...@@ -24,4 +26,9 @@ export const sitemap = [{
] ]
} }
] ]
}, {
title: 'Others', element: <CleanLayout />, children: [
// ERROR
{ path: '*', element: loadComponent('Err404') }
]
}]; }];
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment