83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import { HamburgerMenuIcon } from "@radix-ui/react-icons";
|
|
import { useEffect, useState } from "react";
|
|
import { Outlet } from "react-router-dom";
|
|
import { main, navigation } from "../../configure.tsx";
|
|
import NavigationTree from "../../components/NavigationTree.tsx";
|
|
import Breadcrumbs from "../../components/Breadcrumbs.tsx";
|
|
import ConfirmationDialog from "../../components/ConfirmationDialog/ConfirmationDialog.tsx";
|
|
|
|
/** Here is located global wrapper for entire application, here you canfind:
|
|
* - Drawer - contains navigation buttons
|
|
* - Navbar - contains hamburger menu and theme selector
|
|
* - Outlet - contains active page content
|
|
* - App theme controll
|
|
*/
|
|
function App() {
|
|
const [openDrawer, setOpenDrawer] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
document.querySelector("html")?.setAttribute("data-theme", "acid");
|
|
// To resolve this issue, you can use the import.meta.env object instead of process.env. The import.meta.env object is provided by Vite.js and allows you to access environment variables in your code.
|
|
document.title = import.meta.env.VITE_APP_NAME;
|
|
}, [openDrawer]);
|
|
|
|
// Function on click drawer hamburger button
|
|
const handleDrawerStatus = () => {
|
|
setOpenDrawer(!openDrawer);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<ConfirmationDialog />
|
|
{/* Root drawer container */}
|
|
{/* Drawer opening is controlled directly via css prop and next via local useState variable */}
|
|
<div className={"drawer " + (openDrawer ? "lg:drawer-open" : "")}>
|
|
{/* A hidden checkbox to toggle the visibility of the drawer */}
|
|
<input
|
|
id="my-drawer"
|
|
type="checkbox"
|
|
placeholder="drawer-checkbox"
|
|
className="drawer-toggle"
|
|
checked={openDrawer}
|
|
onChange={handleDrawerStatus}
|
|
/>
|
|
{/* The actual drawer content */}
|
|
<div className="drawer-content">
|
|
{/* Navbar */}
|
|
<div className="navbar bg-neutral text-neutral-content w-auto">
|
|
{/* Left side navbar */}
|
|
<div className="flex-1">
|
|
<label
|
|
htmlFor="my-drawer"
|
|
className="btn btn-circle btn-neutral drawer-button"
|
|
>
|
|
<HamburgerMenuIcon className="w-6 h-6" />
|
|
</label>
|
|
<p className="text-lg font-bold ml-8">{main.program_name}</p>
|
|
</div>
|
|
{/* Right side navbar */}
|
|
<div className="flex-none gap-2">{main.program_version}</div>
|
|
</div>
|
|
{/* App/active_drawer content */}
|
|
<div className="drawer-content">
|
|
{/*Automatically generated breadcrumbs based on routing table from configuration file and active path*/}
|
|
{/*Get active route and find it in routing file*/}
|
|
<Breadcrumbs />
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
{/* Drawer sidebar wrapper */}
|
|
<div className="drawer-side z-20">
|
|
{/* Dark overlay on mobile devices, clickable to close drawer */}
|
|
<label htmlFor="my-drawer" className="drawer-overlay"></label>
|
|
<ul className="menu bg-base-200 w-56 h-full overflow-auto">
|
|
<NavigationTree routes={navigation} />
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|