added Batterymenu and refactor

widget/modules/Battery/Battery.scss

@@ -1,12 +1,16 @@
 .Battery {
-  background-color: rgb(70, 70, 70);
-  border-radius: 25px;
-  border: 3pt solid black;
-  padding: 0 5px;
-  icon {
-    margin: 0 5px;
-  }
-  label {
-    margin: 0 5px 0 0;
-  }
+    background-color: rgb(70, 70, 70);
+    border-radius: 25px;
+    border: 3pt solid black;
+    padding: 0 5px;
+    transition: 300ms;
+    &:hover {
+        background-color: gray;
+    }
+    icon {
+        margin: 0 5px;
+    }
+    label {
+        margin: 0 5px 0 0;
+    }
 }

widget/modules/Battery/Battery.tsx

@@ -1,15 +1,26 @@
-import { bind } from "astal"
-import Battery from "gi://AstalBattery"
+import { bind } from "astal";
+import Battery from "gi://AstalBattery";
+import { close_all_menus } from "../../utils/windows";
+import { App } from "astal/gtk3";
 
 export default function BatteryLevel() {
-    const bat = Battery.get_default()
-    console.log(bat.charging, bat.capacity, bat.energyFull, bat.energy_full_design)
+  const bat = Battery.get_default();
 
-    return <box className="Battery"
-        visible={bind(bat, "isPresent")}>
+  return (
+    <button
+      onClicked={() => {
+        close_all_menus("batterymenu");
+        App.toggle_window("batterymenu");
+      }}
+      className="Battery"
+      visible={bind(bat, "isPresent")}
+    >
+      <box>
         <icon icon={bind(bat, "batteryIconName")} />
-        <label label={bind(bat, "percentage").as(p =>
-            `${Math.floor(p * 100)} %`
-        )} />
-    </box>
-}
+        <label
+          label={bind(bat, "percentage").as((p) => `${Math.floor(p * 100)} %`)}
+        />
+      </box>
+    </button>
+  );
+}