Merge pull request #216 from Hunter275/issue-215-battery-level-display

add battery and voltage to sidebar

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) => (