Implement dashboard skeleton

modules/menus/dashboard/controls/index.js

@@ -0,0 +1,33 @@
+const Controls = () => {
+  return Widget.Box({
+    class_name: "controls-container",
+    children: [
+      Widget.Button({
+        class_name: "dashboard-button airplane-mode",
+      }),
+      Widget.Separator({
+        hpack: "center",
+        vexpand: true,
+        vertical: true,
+        class_name: "menu-separator dashboard-controls",
+      }),
+      Widget.Button({
+        class_name: "dashboard-button wifi",
+      }),
+      Widget.Button({
+        class_name: "dashboard-button bluetooth",
+      }),
+      Widget.Button({
+        class_name: "dashboard-button notifications",
+      }),
+      Widget.Button({
+        class_name: "dashboard-button playback",
+      }),
+      Widget.Button({
+        class_name: "dashboard-button input",
+      }),
+    ],
+  });
+};
+
+export { Controls };

modules/menus/dashboard/index.js

@@ -0,0 +1,37 @@
+import PopupWindow from "../PopupWindow.js";
+import { Profile } from "./profile/index.js";
+import { Shortcuts } from "./shortcuts/index.js";
+import { Controls } from "./controls/index.js";
+import { Stats } from "./stats/index.js";
+
+export default () => {
+  return PopupWindow({
+    name: "dashboardmenu",
+    visible: false,
+    transition: "crossfade",
+    layout: "top-left",
+    child: Widget.Box({
+      class_name: "dashboard-menu-content",
+      css: "padding: 1px; margin: -1px;",
+      vexpand: false,
+      children: [
+        Widget.Box({
+          class_name: "dashboard-content-container",
+          vertical: true,
+          children: [
+            Widget.Box({
+              class_name: "dashboard-content-items",
+              vertical: true,
+              children: [
+                Profile(),
+                Shortcuts(),
+                Controls(),
+                Stats(),
+              ],
+            }),
+          ],
+        }),
+      ],
+    }),
+  });
+};

modules/menus/dashboard/profile/index.js

@@ -0,0 +1,37 @@
+const Profile = () => {
+  return Widget.Box({
+    class_name: "profiles-container",
+    children: [
+      Widget.Box({
+        class_name: "profile-picture-container",
+        children: [
+          Widget.Icon({
+            class_name: "profile-picture",
+          }),
+          Widget.Box({
+            class_name: "profile-name",
+          }),
+        ],
+      }),
+      Widget.Box({
+        class_name: "power-menu-container",
+        children: [
+          Widget.Button({
+            class_name: "dashboard-button shutdown",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button restart",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button lock",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button sleep",
+          }),
+        ],
+      }),
+    ],
+  });
+};
+
+export { Profile };

modules/menus/dashboard/shortcuts/index.js

@@ -0,0 +1,43 @@
+const Shortcuts = () => {
+  return Widget.Box({
+    class_name: "shortcuts-container",
+    children: [
+      Widget.Box({
+        class_name: "most-used-container",
+        children: [
+          Widget.Button({
+            class_name: "dashboard-button edge",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button spotify",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button discord",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button search",
+          }),
+        ],
+      }),
+      Widget.Box({
+        class_name: "utilities-container",
+        children: [
+          Widget.Button({
+            class_name: "dashboard-button utility",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button utility",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button utility",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button utility",
+          }),
+        ],
+      }),
+    ],
+  });
+};
+
+export { Shortcuts };

modules/menus/dashboard/stats/index.js

@@ -0,0 +1,21 @@
+const Stats = () => {
+  return Widget.Box({
+    class_name: "stats-container",
+    children: [
+      Widget.Box({
+        class_name: "stat-cpu",
+      }),
+      Widget.Box({
+        class_name: "stat-ram",
+      }),
+      Widget.Box({
+        class_name: "stat-gpu",
+      }),
+      Widget.Box({
+        class_name: "stat-storage",
+      }),
+    ],
+  });
+};
+
+export { Stats };