WIP

src/components/Sidebar.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 
-import type {
-  IBLEConnection,
-  IHTTPConnection,
-  ISerialConnection,
-} from '@meshtastic/meshtasticjs';
+import { AnimatePresence, motion } from 'framer-motion';
 
 import { useAppSelector } from '../hooks/redux';
 import { Channels } from './Sidebar/Channels/Index';
@@ -12,23 +8,24 @@ import { Device } from './Sidebar/Device/Index';
 import { Nodes } from './Sidebar/Nodes/Index';
 import { UI } from './Sidebar/UI/Index';
 
-interface SidebarProps {
-  connection: ISerialConnection | IHTTPConnection | IBLEConnection;
-}
-
-export const Sidebar = (props: SidebarProps): JSX.Element => {
+export const Sidebar = (): JSX.Element => {
   const sidebarOpen = useAppSelector((state) => state.app.sidebarOpen);
+
   return (
-    <div
-      className={`${
-        sidebarOpen ? 'flex' : 'hidden md:flex'
-      } flex-col rounded-md md:ml-0 shadow-md border w-full max-w-sm`}
-    >
-      <Nodes />
-      <Device connection={props.connection} />
-      <Channels />
-      <div className="flex-grow border-b"></div>
-      <UI />
-    </div>
+    <AnimatePresence>
+      {sidebarOpen && (
+        <motion.div
+          className={`${
+            sidebarOpen ? 'flex' : 'hidden md:flex'
+          } flex-col rounded-md md:ml-0 shadow-md border w-full max-w-sm`}
+        >
+          <Nodes />
+          <Device />
+          <Channels />
+          <div className="flex-grow border-b"></div>
+          <UI />
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 };