From 6bb4d112a08f2e36df63b02b8121f1f396935a01 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Wed, 8 Dec 2021 18:13:13 +1100
Subject: [PATCH] Make node a disclosure

---
 src/pages/Nodes/Index.tsx | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/pages/Nodes/Index.tsx b/src/pages/Nodes/Index.tsx
index f2d017e9..92b322ab 100644
--- a/src/pages/Nodes/Index.tsx
+++ b/src/pages/Nodes/Index.tsx
@@ -9,6 +9,7 @@ import { useAppSelector } from '@app/hooks/redux';
 import { Drawer } from '@components/generic/Drawer';
 import { IconButton } from '@components/generic/IconButton';
 import { Map } from '@components/Map';
+import { Disclosure } from '@headlessui/react';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const Nodes = (): JSX.Element => {
@@ -51,11 +52,12 @@ export const Nodes = (): JSX.Element => {
           </span>
         )}
         {nodes.map((node) => (
-          <div
-            key={node.number}
+          <Disclosure
+            as="div"
             className="m-2 rounded-md shadow-md bg-gray-50 dark:bg-gray-700"
+            key={node.number}
           >
-            <div className="flex gap-2 p-2 bg-gray-100 shadow-md rounded-t-md dark:bg-primaryDark">
+            <Disclosure.Button className="flex w-full gap-2 p-2 bg-gray-100 rounded-md shadow-md dark:bg-primaryDark">
               <div
                 className={`my-auto w-3 h-3 rounded-full ${
                   node.lastHeard > new Date(Date.now() - 1000 * 60 * 15)
@@ -83,16 +85,18 @@ export const Nodes = (): JSX.Element => {
               ) : (
                 <IconButton disabled icon={<MdGpsOff />} />
               )}
-            </div>
-            <div className="flex p-2">
-              <div className="my-auto">
-                {Protobuf.HardwareModel[node.user?.hwModel ?? 0]}
+            </Disclosure.Button>
+            <Disclosure.Panel className="p-2">
+              <div className="flex">
+                <div className="my-auto">
+                  {Protobuf.HardwareModel[node.user?.hwModel ?? 0]}
+                </div>
+                <div className="ml-auto">
+                  <IconButton icon={<FiCode className="w-5 h-5" />} />
+                </div>
               </div>
-              <div className="ml-auto">
-                <IconButton icon={<FiCode className="w-5 h-5" />} />
-              </div>
-            </div>
-          </div>
+            </Disclosure.Panel>
+          </Disclosure>
         ))}
       </Drawer>
       <Map />