main.js

@@ -1,8 +1,8 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require("electron");
+const { app, BrowserWindow } = require('electron');
-const path = require("path");
+const path = require('path');
-const serve = require("electron-serve");
+const serve = require('electron-serve');
-const loadURL = serve({ directory: "public" });
+const loadURL = serve({ directory: 'public' });
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -17,15 +17,14 @@ function createWindow() {
     mainWindow = new BrowserWindow({
         width: 800,
         height: 600,
-    resizable: false,
         webPreferences: {
             nodeIntegration: true,
-      preload: path.join(__dirname, "preload.js"),
+            preload: path.join(__dirname, 'preload.js'),
             // enableRemoteModule: true,
             // contextIsolation: false
         },
-    icon: path.join(__dirname, "public/favicon.png"),
+        icon: path.join(__dirname, 'public/favicon.png'),
-    show: false,
+        show: false
     });
 
     // disable electron toolbar
@@ -35,7 +34,7 @@ function createWindow() {
     // This block of code is intended for development purpose only.
     // Delete this entire block of code when you are ready to package the application.
     if (isDev()) {
-    mainWindow.loadURL("http://localhost:8080/");
+        mainWindow.loadURL('http://localhost:8080/');
     } else {
         loadURL(mainWindow);
     }
@@ -48,36 +47,36 @@ function createWindow() {
     // mainWindow.webContents.openDevTools();
 
     // Emitted when the window is closed.
-  mainWindow.on("closed", function () {
+    mainWindow.on('closed', function () {
         // Dereference the window object, usually you would store windows
         // in an array if your app supports multi windows, this is the time
         // when you should delete the corresponding element.
-    mainWindow = null;
+        mainWindow = null
     });
 
     // Emitted when the window is ready to be shown
     // This helps in showing the window gracefully.
-  mainWindow.once("ready-to-show", () => {
+    mainWindow.once('ready-to-show', () => {
-    mainWindow.show();
+        mainWindow.show()
     });
 }
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on("ready", createWindow);
+app.on('ready', createWindow);
 
 // Quit when all windows are closed.
-app.on("window-all-closed", function () {
+app.on('window-all-closed', function () {
     // On macOS it is common for applications and their menu bar
     // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== "darwin") app.quit();
+    if (process.platform !== 'darwin') app.quit()
 });
 
-app.on("activate", function () {
+app.on('activate', function () {
     // On macOS it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.
-  if (mainWindow === null) createWindow();
+    if (mainWindow === null) createWindow()
 });
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.

src/App.svelte

@@ -1,15 +1,24 @@
 <script>
   import {
+    Navbar,
+    NavBrand,
+    NavLi,
+    NavUl,
+    NavHamburger,
     Avatar,
     Dropdown,
     DropdownItem,
     DropdownHeader,
-    DropdownDivider,
+    DropdownDivider
   } from "flowbite-svelte";
-  import ezppLogo from "../public/favicon.png";
+  import ezppLogo from '../public/favicon.png';
+
+  let count = 0;
 </script>
 
-<div class="p-2 flex flex-row justify-between items-center">
+<div
+  class="p-2 bg-gray-950 flex flex-row justify-between items-center rounded-lg"
+>
   <div class="flex flex-row items-center">
     <img src={ezppLogo} class="w-12 h-12 mr-2" />
     <span class="text-gray-100 text-xl font-extralight">EZPPLauncher</span>
@@ -28,24 +37,25 @@
         >me@horizonco.de</span
       >
     </DropdownHeader>
-    <DropdownItem
+    <DropdownItem class="border-0 !bg-gray-700 active:!bg-gray-800"
-      class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
       >Profile</DropdownItem
     >
     <DropdownDivider />
-    <DropdownItem
+    <DropdownItem class="border-0 !bg-gray-700 active:!bg-gray-800"
-      class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
       >Sign out</DropdownItem
     >
   </Dropdown>
 </div>
 
-<main class="border border-gray-700 rounded-lg"></main>
+<main>
+  <!-- <button class="btn" on:click={() => (count += 1)}>Count: {count}</button> -->
+</main>
 
 <style>
   main {
     text-align: center;
     padding: 1em;
+    max-width: 240px;
     margin: 0 auto;
   }
 
@@ -63,4 +73,10 @@
     border-bottom: 1px solid #353535;
     margin-bottom: 1.5rem;
   }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
 </style>