Implement dashboard skeleton

modules/menus/PopupWindow.js

@@ -92,6 +92,10 @@ const Layout = (name, child, transition) => ({
           hexpand: false,
           vertical: true,
         },
+        Padding(name, {
+          vexpand: false,
+          className: "event-top-padding",
+        }),
         PopupRevealer(name, child, transition),
         Padding(name),
       ),

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 };

modules/menus/main.js

@@ -7,6 +7,8 @@ import MediaMenu from "./media/index.js";
 import NotificationsMenu from "./notifications/index.js";
 import CalendarMenu from "./calendar/index.js";
 import EnergyMenu from "./energy/index.js";
+import DashboardMenu from "./dashboard/index.js";
+
 export default [
   PowerMenu(),
   Verification(),
@@ -17,4 +19,5 @@ export default [
   NotificationsMenu(),
   CalendarMenu(),
   EnergyMenu(),
+  DashboardMenu(),
 ];