layout cleanup wip

src/App.tsx

@@ -1,6 +1,5 @@
 import type React from "react";
 
-import { Toaster } from "react-hot-toast";
 import { MapProvider } from "react-map-gl";
 
 import { useAppStore } from "@app/core/stores/appStore.js";
@@ -9,12 +8,13 @@ import { PageRouter } from "@app/PageRouter.js";
 import { CommandPalette } from "@components/CommandPalette/Index.js";
 import { DeviceSelector } from "@components/DeviceSelector.js";
 import { DialogManager } from "@components/Dialog/DialogManager.js";
-import { Drawer } from "@components/Drawer/index.js";
 import { NewDevice } from "@components/NewDevice.js";
-import { PageNav } from "@components/PageNav.js";
 import { Sidebar } from "@components/Sidebar.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
+
+import { Drawer } from "./components/Drawer/index.js";
 import { ThemeController } from "./components/generic/ThemeController.js";
+import { BottomNav } from "./Nav/BottomNav.js";
 
 export const App = (): JSX.Element => {
   const { getDevice } = useDeviceStore();
@@ -24,30 +24,26 @@ export const App = (): JSX.Element => {
 
   return (
     <ThemeController>
-      <div className="flex h-screen w-full bg-backgroundSecondary">
-        <DeviceSelector />
-
-        {device && (
-          <DeviceWrapper device={device}>
-            <CommandPalette />
-            <Toaster
-              toastOptions={{
-                duration: 4000
-              }}
-            />
-            <DialogManager />
-            <Sidebar />
-            <PageNav />
-            <MapProvider>
-              <div className="flex h-full w-full flex-col overflow-y-auto">
-                <PageRouter />
-                <Drawer />
-              </div>
-            </MapProvider>
-          </DeviceWrapper>
-        )}
-        {selectedDevice === 0 && <NewDevice />}
-      </div>
+      <MapProvider>
+        <DeviceWrapper device={device}>
+          <div className="flex bg-backgroundSecondary">
+            <DeviceSelector />
+            <div className="flex flex-grow flex-col">
+              {device ? (
+                <div className="flex flex-grow">
+                  <DialogManager />
+                  <CommandPalette />
+                  <Sidebar />
+                  <PageRouter />
+                </div>
+              ) : (
+                <NewDevice />
+              )}
+              <BottomNav>{device && <Drawer />}</BottomNav>
+            </div>
+          </div>
+        </DeviceWrapper>
+      </MapProvider>
     </ThemeController>
   );
 };