32 lines
1.2 KiB
JavaScript
32 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import { Outlet, useLocation } from 'react-router-dom';
|
|
import Navbar from './components/Navbar';
|
|
import BottomNav from './components/BottomNav';
|
|
import PageHeader from './components/PageHeader';
|
|
import Loading from './components/Loading';
|
|
import { useIsMobile } from './hooks/useIsMobile';
|
|
import './App.css';
|
|
|
|
function App() {
|
|
const isMobile = useIsMobile();
|
|
const { pathname } = useLocation();
|
|
const isImmersiveRoute = pathname.startsWith('/saju');
|
|
|
|
return (
|
|
<div className={`app-shell${isImmersiveRoute ? ' app-shell--immersive' : ''}`}>
|
|
{!isImmersiveRoute && <Navbar />}
|
|
<div className={`app-content${isImmersiveRoute ? ' app-content--immersive' : ''}`}>
|
|
<main className={`site-main${isImmersiveRoute ? ' site-main--immersive' : ''}`}>
|
|
{!isImmersiveRoute && <PageHeader />}
|
|
<React.Suspense fallback={<div className="suspend-loading"><Loading /></div>}>
|
|
<Outlet />
|
|
</React.Suspense>
|
|
</main>
|
|
</div>
|
|
{isMobile && !isImmersiveRoute && <BottomNav />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|