39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { Routes, Route } from 'react-router-dom';
|
|
import { AppShell } from '@mantine/core';
|
|
import { useDisclosure } from '@mantine/hooks';
|
|
import Header from './components/Header';
|
|
import Navigation from './components/Navigation';
|
|
import HomePage from './pages/HomePage';
|
|
import AppLoader from './components/AppLoader';
|
|
|
|
function App() {
|
|
const [collapsed, { toggle: toggleNavbar }] = useDisclosure(false);
|
|
|
|
return (
|
|
<AppShell
|
|
header={{ height: 60 }}
|
|
navbar={{
|
|
width: 300,
|
|
breakpoint: 'sm',
|
|
collapsed: { mobile: collapsed, desktop: collapsed }
|
|
}}
|
|
padding="md"
|
|
>
|
|
<AppShell.Header>
|
|
<Header onToggleNavbar={toggleNavbar} />
|
|
</AppShell.Header>
|
|
<AppShell.Navbar>
|
|
<Navigation />
|
|
</AppShell.Navbar>
|
|
<AppShell.Main>
|
|
<Routes>
|
|
<Route path="/" element={<HomePage />} />
|
|
<Route path="/app/:appName/*" element={<AppLoader />} />
|
|
</Routes>
|
|
</AppShell.Main>
|
|
</AppShell>
|
|
);
|
|
}
|
|
|
|
export default App; |