Fix sidebar

src/App.tsx

@@ -39,7 +39,7 @@ export const App = (): JSX.Element => {
               ) : (
                 <NewDevice />
               )}                        
-              <BottomNav>{device && <Drawer />}</BottomNav>
+              {<BottomNav>{device && <Drawer />}</BottomNav>}
             </div>
           </div>
         </DeviceWrapper>

src/components/DeviceSelector.tsx

@@ -12,6 +12,8 @@ export const DeviceSelector = (): JSX.Element => {
   const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } =
     useAppStore();
 
+  console.log(`Current device: ${selectedDevice}`);
+
   return (
     <div className="flex h-full w-14 items-center gap-3 bg-backgroundPrimary pt-3 [writing-mode:vertical-rl]">
       <div className="flex items-center gap-3">
@@ -44,8 +46,8 @@ export const DeviceSelector = (): JSX.Element => {
           </div>
         </span>
       </div>
-
+            
-      {selectedDevice !== 0 && (
+      {selectedDevice > 0 && (    // TODO_MG: Handle selectedDevice == -1
         <>
           <NavSpacer />
           <PageNav />

src/components/DeviceSetup.tsx

@@ -17,9 +17,9 @@ export const DeviceSetup = (): JSX.Element => {
 
     return (
         <DeviceWrapper device={testDevice}>
-            <SidebarSetup/>
+            { <SidebarSetup/> }
-            {/* <PageNav pages={pagesSetup}/> */}
+            {/* <PageNav pages={pagesSetup}/> TODO_MG: Fix these */}
-            <PageRouter/>            
+            {/* <PageRouter/>             */}
         </DeviceWrapper>
     );
 }

src/components/SidebarSetup.tsx

@@ -28,29 +28,31 @@ export const SidebarSetup = (): JSX.Element => {
   const devicesToFlash = devices.map(d => d.selectedToFlash);
 
   return (    
-    <div className="bg-slate-50 relative flex flex-col w-72 flex-shrink-0 flex-col gap-2 p-2">
+    <div className="flex flex-grow">
-      <div className="h-1/2">
+      <div className="bg-slate-50 relative flex w-72 flex-shrink-0 flex-col gap-2 p-2">
-        <div className="flex h-16 flex-col gap-2 overflow-y-auto">        
+        <div className="h-1/2">
-          {devices.map((device, index) => (
+          <div className="flex h-16 flex-col gap-2 overflow-y-auto">        
-            <Button
+            {devices.map((device, index) => (
-              key={index}
+              <Button
-              color={devicesToFlash[index] ? "bg-accentMuted" : "bg-backgroundPrimary"}
+                key={index}
-              onClick={() => {
+                color={devicesToFlash[index] ? "bg-accentMuted" : "bg-backgroundPrimary"}
-                devicesToFlash[index] = !devicesToFlash[index];
+                onClick={() => {
-                console.log(`Set device ${index}: ${devicesToFlash[index]}`);
+                  devicesToFlash[index] = !devicesToFlash[index];                
-                device.setSelectedToFlash(devicesToFlash[index]);
+                  console.log(`Set device ${index}: ${devicesToFlash[index]}`);
-              }}
+                  device.setSelectedToFlash(devicesToFlash[index]);
-              size="sm"
+                }}
-            >
+                size="sm"
-              {`${getButtonText(device)}`}
+              >
-            </Button>
+                {`${getButtonText(device)}`}
-          ))}
+              </Button>
-          
+            ))}
-        </div>
+            
-      </div>      
+          </div>
-      <div className="w-1/1 h-0.5 bg-accent"></div>
+        </div>      
-      <div className="h-1/2">{<Mono>(Configurations go here)</Mono>}</div>
+        <div className="w-1/1 h-0.5 bg-accent"></div>
-      
+        <div className="h-1/2">{<Mono>(Configurations go here)</Mono>}</div>
+        
+      </div>
     </div>
   );
 };

src/components/form/Button.tsx

@@ -14,7 +14,7 @@ export const Button = ({
 }: ButtonProps): JSX.Element => {
   return (
     <button
-      className={`flex w-full select-none rounded-md ${color} bg-accentMuted px-3 text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${
+      className={`flex w-full select-none rounded-md ${color} px-3 text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${
         size === "sm"
           ? "h-8 text-sm"
           : size === "md"