refactor

widget/modules/Powermenu/PowerMenu.scss

@@ -0,0 +1,22 @@
+window.Powermenu {
+    margin: 5px;
+    background-color: transparent;
+    box {
+        margin: 5px;
+        background-color: black;
+        border-radius: 25px;
+        // padding: 10px;
+        button {
+            all: unset;
+            margin: 2px;
+            padding: 5px 15px 5px 13px;
+            background-color: black;
+            border-radius: 25px;
+            transition: 300ms;
+
+            &:hover {
+                background-color: gray;
+            }
+        }
+    }
+}

widget/modules/Powermenu/PowerMenu.tsx

@@ -0,0 +1,26 @@
+import { Astal, App } from "astal/gtk3";
+
+export default function PowerMenu() {
+    const { TOP, RIGHT } = Astal.WindowAnchor
+    const powermenulist = [
+        {action: "/home/tola/.config/ags/scripts/powermenu lock", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu suspend", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu logout", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu reboot", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu poweroff", label: ""}
+    ]
+
+    return <window 
+                anchor={TOP | RIGHT} 
+                name="powermenu" 
+                className="Powermenu"
+                application={App}
+                visible={false}
+            >
+        <box>
+            {powermenulist.map(data => (
+                <button onClicked={data.action}>{data.label}</button>
+            ))}
+        </box>
+    </window>
+}