From bf68e8a58ebba6dd8d6c6e2ca6d4064fea04d246 Mon Sep 17 00:00:00 2001
From: Hunter Thornsberry <hunter@hunterthornsberry.com>
Date: Mon, 3 Jun 2024 23:41:21 -0400
Subject: [PATCH] - add battery and voltage to sidebar

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

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 8b81fe92..7712cf94 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -11,6 +11,8 @@ import {
   MessageSquareIcon,
   SettingsIcon,
   UsersIcon,
+  ZapIcon,
+  BatteryMediumIcon
 } from "lucide-react";
 
 export interface SidebarProps {
@@ -58,7 +60,7 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
 
   return (
     <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 py-6">
+      <div className="flex justify-between px-8 pt-6">
         <div>
           <span className="text-lg font-medium">
             {myNode?.user?.shortName ?? "UNK"}
@@ -73,6 +75,16 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
           <EditIcon size={16} />
         </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 ?? "UNK"}%</Subtle>
+          </div>
+          <div className="flex items-center">
+              <ZapIcon size={24} viewBox={'0 0 36 24'}/>
+              <Subtle>{myNode?.deviceMetrics?.voltage.toPrecision(3) ?? "UNK"} volts</Subtle>
+          </div>
+        </div>
 
       <SidebarSection label="Navigation">
         {pages.map((link) => (