From c2cdc92ae9baed8650cd5ec8f84c32a885c19b4b Mon Sep 17 00:00:00 2001
From: Daniel <daniel.hogstrom@gmail.com>
Date: Sun, 12 Jan 2025 18:56:22 +0100
Subject: [PATCH 1/2] feat: Add sidebar close button

---
 src/components/Sidebar.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 48c496e5..dba5b3fa 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -12,9 +12,12 @@ import {
   MapIcon,
   MessageSquareIcon,
   SettingsIcon,
+  SidebarCloseIcon,
+  SidebarOpenIcon,
   UsersIcon,
   ZapIcon,
 } from "lucide-react";
+import { useState } from "react";
 
 export interface SidebarProps {
   children?: React.ReactNode;
@@ -25,6 +28,7 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
   const myNode = nodes.get(hardware.myNodeNum);
   const myMetadata = metadata.get(0);
   const { activePage, setActivePage, setDialogOpen } = useDevice();
+  const [showSidebar, setShowSidebar] = useState<boolean>(true);
 
   interface NavLink {
     name: string;
@@ -60,7 +64,7 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
     },
   ];
 
-  return (
+  return showSidebar ? (
     <div className="min-w-[280px] max-w-min flex-col overflow-y-auto border-r-[0.5px] border-slate-300 bg-transparent dark:border-slate-700">
       <div className="flex justify-between px-8 pt-6">
         <div>
@@ -76,6 +80,12 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
         >
           <EditIcon size={16} />
         </button>
+        <button
+          type="button"
+          onClick={() => setShowSidebar(false)}
+        >
+          <SidebarCloseIcon size={24} />
+        </button>
       </div>
       <div className="px-8 pb-6">
         <div className="flex items-center">
@@ -109,5 +119,14 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
       </SidebarSection>
       {children}
     </div>
+  ) : (
+    <div className="px-1 pt-8">
+      <button
+        type="button"
+        onClick={() => setShowSidebar(true)}
+      >
+        <SidebarOpenIcon size={24} />
+      </button> 
+    </div>
   );
 };

From be6acc5ef2d96031e2bbd1b2aa15259049c1d6cc Mon Sep 17 00:00:00 2001
From: Hunter275 <hunter@hunterthornsberry.com>
Date: Sun, 19 Jan 2025 00:50:23 -0500
Subject: [PATCH 2/2] add right border

---
 src/components/Sidebar.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index dba5b3fa..d4ada2bd 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -80,17 +80,20 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
         >
           <EditIcon size={16} />
         </button>
-        <button
-          type="button"
-          onClick={() => setShowSidebar(false)}
-        >
+        <button type="button" onClick={() => setShowSidebar(false)}>
           <SidebarCloseIcon size={24} />
         </button>
       </div>
       <div className="px-8 pb-6">
         <div className="flex items-center">
           <BatteryMediumIcon size={24} viewBox={"0 0 28 24"} />
-          <Subtle>{myNode?.deviceMetrics?.batteryLevel ? myNode?.deviceMetrics?.batteryLevel > 100 ? "Charging" : myNode?.deviceMetrics?.batteryLevel + "%"  : "UNK"}</Subtle>
+          <Subtle>
+            {myNode?.deviceMetrics?.batteryLevel
+              ? myNode?.deviceMetrics?.batteryLevel > 100
+                ? "Charging"
+                : myNode?.deviceMetrics?.batteryLevel + "%"
+              : "UNK"}
+          </Subtle>
         </div>
         <div className="flex items-center">
           <ZapIcon size={24} viewBox={"0 0 36 24"} />
@@ -120,13 +123,10 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
       {children}
     </div>
   ) : (
-    <div className="px-1 pt-8">
-      <button
-        type="button"
-        onClick={() => setShowSidebar(true)}
-      >
+    <div className="px-1 pt-8 border-r-[0.5px] border-slate-700">
+      <button type="button" onClick={() => setShowSidebar(true)}>
         <SidebarOpenIcon size={24} />
-      </button> 
+      </button>
     </div>
   );
 };