consistent menu bar

package.json

@@ -10,6 +10,7 @@
     "build": "vite build && electron-builder"
   },
   "devDependencies": {
+    "@electron/remote": "^2.0.7",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
     "builtin-modules": "^3.2.0",
     "concurrently": "^7.0.0",

src/index.js

@@ -1,5 +1,7 @@
 const { app, BrowserWindow, protocol } = require('electron')
 const path = require('path')
+const remote = require('@electron/remote/main')
+remote.initialize()
 
 // 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.
@@ -24,6 +26,7 @@ function createWindow () {
   mainWindow = new BrowserWindow({
     width: 1600,
     height: 900,
+    frame: false,
     backgroundColor: '#191c20',
     autoHideMenuBar: true,
     experimentalFeatures: true,
@@ -31,12 +34,14 @@ function createWindow () {
       nodeIntegration: true,
       contextIsolation: false,
       enableBlinkFeatures: 'AudioVideoTracks',
-      // enableRemoteModule: true,
+      enableRemoteModule: true,
       backgroundThrottling: false
     },
     icon: path.join(__dirname, '/renderer/public/logo.ico'),
     show: false
   })
+  mainWindow.setMenuBarVisibility(false)
+  remote.enable(mainWindow.webContents)
 
   protocol.registerHttpProtocol('miru', (req, cb) => {
     const token = req.url.slice(7)

src/renderer/src/App.svelte

@@ -10,6 +10,7 @@
   import Router from './lib/Router.svelte'
   import ViewAnime from './lib/ViewAnime.svelte'
   import RSSView from './lib/RSSView.svelte'
+  import Menubar from './lib/Menubar.svelte'
 
   let view = writable(null)
   setContext('view', view)
@@ -24,16 +25,18 @@
 
 <ViewAnime />
 <RSSView />
-<div class="page-wrapper with-sidebar with-transitions" data-sidebar-type="full-height overlayed-sm-and-down" data-sidebar-hidden={$sidebar || null}>
+<div class="page-wrapper with-navbar with-sidebar with-transitions" data-sidebar-type="overlayed-sm-and-down" data-sidebar-hidden={$sidebar || null}>
   <div class="sticky-alerts" />
   <!-- svelte-ignore missing-declaration -->
   <div class="sidebar-overlay" on:click={() => ($sidebar = !$sidebar)} />
+  <Menubar />
   <Sidebar bind:page={$page} />
   <Router bind:page={$page} />
 </div>
 
 <style>
   :root {
+    --navbar-height: 28px;
     --accent-color: #e5204c;
     --dm-link-text-color: var(--dm-muted-text-color) !important;
     --dm-link-text-color-hover: var(--dm-text-color) !important;

src/renderer/src/lib/Menubar.svelte

@@ -0,0 +1,66 @@
+<script>
+  const { getCurrentWindow } = require('@electron/remote')
+  const window = getCurrentWindow()
+</script>
+
+<div class="w-full navbar border-0 bg-dark position-relative p-0">
+  <div class="menu-shadow shadow-lg position-absolute w-full h-full z-0" />
+  <div class="w-full h-full bg-dark z-10 d-flex">
+    <div class="d-flex w-full draggable h-full align-items-center">
+      <img src="./logo.ico" alt="ico" />
+      {document.title}
+    </div>
+    <div class="controls d-flex h-full">
+      <div class="d-flex align-items-center" on:click={() => window.minimize()}>
+        <svg viewBox="0 0 24 24">
+          <path d="M19 13H5v-2h14v2z" />
+        </svg>
+      </div>
+      <div class="d-flex align-items-center" on:click={() => (window.isMaximized() ? window.unmaximize() : window.maximize())}>
+        <svg viewBox="0 0 24 24">
+          <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+        </svg>
+      </div>
+      <div class="d-flex align-items-center close" on:click={() => window.close()}>
+        <svg viewBox="0 0 24 24">
+          <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .draggable {
+    -webkit-app-region: drag;
+    color: var(--dm-text-muted-color);
+  }
+  .menu-shadow {
+    left: var(--sidebar-width);
+    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+  }
+  img {
+    margin: 0 8px;
+    height: 16px;
+    width: 16px;
+  }
+  .controls > div {
+    width: 40px;
+    transition: background 0.15s ease;
+  }
+  .controls > div:hover {
+    background-color: #ffffff33;
+    color: #fff;
+  }
+  .controls > .close:hover {
+    background-color: #e81123 !important;
+  }
+  svg {
+    width: 18px;
+    height: 18px;
+    width: 100%;
+  }
+  path {
+    fill: currentColor;
+  }
+</style>

vite.config.js

@@ -6,6 +6,7 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 import commonjsExternals from 'vite-plugin-commonjs-externals'
 
 const commonjsPackages = [
+  '@electron/remote',
   'webtorrent',
   'matroska-subtitles',
   ...builtinModules