refactor: Lift layout structure to App component

src/App.tsx

@@ -1,3 +1,4 @@
+import Topbar from './components/Topbar';
 import PageContainer from './components/PageContainer';
 import Sidebar from './components/Sidebar';
 import { ThemeButton } from './components/ThemeButton';
@@ -6,7 +7,10 @@ const App = () => {
   return (
     <div className="flex h-screen">
       <Sidebar />
-      <PageContainer />
+      <div className="flex flex-col flex-1">
+        <Topbar />
+        <PageContainer />
+      </div>
       <div className="absolute bottom-4 right-4">
         <ThemeButton />
       </div>

src/components/PageContainer.tsx

@@ -1,7 +1,5 @@
 import { Routes, Route } from 'react-router-dom';
 
-import Topbar from './Topbar';
-
 import Home from './pages/Home';
 import Dashboard from './pages/Dashboard';
 import Todos from './pages/Todos';
@@ -9,15 +7,12 @@ import NotFound from './pages/default/NotFound';
 
 const PageContainer = () => {
   return (
-    <div className="flex flex-col flex-1">
+    <Routes>
-      <Topbar />
+      <Route path="/" element={<Home />} />
-      <Routes>
+      <Route path="/dashboard" element={<Dashboard />} />
-        <Route path="/" element={<Home />} />
+      <Route path="/todos" element={<Todos />} />
-        <Route path="/dashboard" element={<Dashboard />} />
+      <Route path="*" element={<NotFound />} />
-        <Route path="/todos" element={<Todos />} />
+    </Routes>
-        <Route path="*" element={<NotFound />} />
-      </Routes>
-    </div>
   );
 };