main.js

@@ -1,83 +1,82 @@
 // 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.
 let mainWindow;
 
 function isDev() {
-  return !app.isPackaged;
+    return !app.isPackaged;
 }
 
 function createWindow() {
-  // Create the browser window.
+    // Create the browser window.
-  mainWindow = new BrowserWindow({
+    mainWindow = new BrowserWindow({
-    width: 800,
+        width: 800,
-    height: 600,
+        height: 600,
-    resizable: false,
+        webPreferences: {
-    webPreferences: {
+            nodeIntegration: true,
-      nodeIntegration: true,
+            preload: path.join(__dirname, 'preload.js'),
-      preload: path.join(__dirname, "preload.js"),
+            // enableRemoteModule: true,
-      // enableRemoteModule: true,
+            // contextIsolation: false
-      // contextIsolation: false
+        },
-    },
+        icon: path.join(__dirname, 'public/favicon.png'),
-    icon: path.join(__dirname, "public/favicon.png"),
+        show: false
-    show: false,
+    });
-  });
 
-  // disable electron toolbar
+    // disable electron toolbar
-  /* if (!isDev()) */
+    /* if (!isDev()) */
-  mainWindow.setMenu(null);
+   mainWindow.setMenu(null);
 
-  // This block of code is intended for development purpose only.
+    // This block of code is intended for development purpose only.
-  // Delete this entire block of code when you are ready to package the application.
+    // Delete this entire block of code when you are ready to package the application.
-  if (isDev()) {
+    if (isDev()) {
-    mainWindow.loadURL("http://localhost:8080/");
+        mainWindow.loadURL('http://localhost:8080/');
-  } else {
+    } else {
-    loadURL(mainWindow);
+        loadURL(mainWindow);
-  }
+    }
 
-  // Uncomment the following line of code when app is ready to be packaged.
+    // Uncomment the following line of code when app is ready to be packaged.
-  // loadURL(mainWindow);
+    // loadURL(mainWindow);
 
-  // Open the DevTools and also disable Electron Security Warning.
+    // Open the DevTools and also disable Electron Security Warning.
-  // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true;
+    // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true;
-  // mainWindow.webContents.openDevTools();
+    // mainWindow.webContents.openDevTools();
 
-  // Emitted when the window is closed.
+    // Emitted when the window is closed.
-  mainWindow.on("closed", function () {
+    mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
+        // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
+        // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
+        // when you should delete the corresponding element.
-    mainWindow = null;
+        mainWindow = null
-  });
+    });
 
-  // Emitted when the window is ready to be shown
+    // Emitted when the window is ready to be shown
-  // This helps in showing the window gracefully.
+    // 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
+    // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
+    // 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
+    // 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.
+    // 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.
+// 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>