Custom Titlebar MVP

public/global.css

@@ -36,7 +36,7 @@ button {
   cursor: pointer;
 }
 
-button:not(.close) {
+button:not(.close):not(.menu-item):not(.window-button) {
   display: inline-flex;
   font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

src/App.svelte

@@ -98,10 +98,13 @@
     display: flex;
     flex-flow: column;
   }
+  main {
+    z-index: 0;
+  }
   .container {
     flex-grow: 1;
   }
-  :global(.hasTitlebar .modal-container .overlay) {
+  :global(.hasTitlebar .modal-container) {
     top: auto;
     bottom: 0;
     height: calc(100% - 32px);

src/components/CustomTitlebar.svelte

@@ -60,13 +60,22 @@
     fill: #fff;
     font-family: "Segoe UI", "Inter", Roboto, Oxygen, Ubuntu, Cantarell,
       "Open Sans", "Helvetica Neue", sans-serif;
-    z-index: 1;
+    z-index: 3;
+
+    &.maximized {
+      padding: 0;
+    }
   }
   #drag-region {
     display: flex;
     width: 100%;
     height: 100%;
     -webkit-app-region: drag;
+    user-select: none;
+
+    & > :global(:not(#window-controls)) {
+      font-size: 13px;
+    }
 
     .blurred & {
       opacity: 0.75;
@@ -91,7 +100,6 @@
     flex-grow: 1;
     overflow: hidden;
     font-family: inherit;
-    font-size: 14px;
 
     span {
       line-height: 1.5;

src/components/Titlebar/MenuItem.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  export let menuItem: CloneableMenuItem;
+  $: focused = menuItem.focused;
+  let menuItemElement;
+
+  const { ipcRenderer } = require("electron");
+  import type { CloneableMenuItem } from "../../types";
+  import { createEventDispatcher } from "svelte";
+  const dispatchEvent = createEventDispatcher();
+
+  const submenuItemClick = (item, event) => {
+    event.stopPropagation();
+    if (item.type === "normal") {
+      ipcRenderer.send("click-menu-item", item.id);
+    } else {
+      return;
+    }
+    dispatchEvent("item-clicked", item.id);
+  };
+
+  const menuItemClick = () => {
+    focused = !focused;
+  };
+
+  const menuItemBlur = () => {
+    focused = false;
+  };
+</script>
+
+<button
+  type="button"
+  class="menu-item"
+  class:focused
+  id={menuItem.id}
+  bind:this={menuItemElement}
+  on:click={menuItemClick}
+  on:blur={menuItemBlur}
+>
+  <div class="label">{menuItem.label.replace("&", "")}</div>
+  {#if menuItem.submenu}
+    <div class="submenu">
+      {#each menuItem.submenu as submenuItem}
+        <div
+          class={`submenu-item ${submenuItem.type}`}
+          on:click={(e) => {
+            submenuItemClick(submenuItem, e);
+          }}
+        >
+          {#if submenuItem.type !== "separator"}
+            <div class="label">{submenuItem.label.replace("&", "")}</div>
+            {#if submenuItem.accelerator}
+              <div class="accelerator">
+                {submenuItem.accelerator.replace("CmdOrCtrl", "Ctrl")}
+              </div>
+            {/if}
+          {:else}
+            <hr />
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</button>
+
+<style lang="scss">
+  .menu-item {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 0 8px;
+    height: 100%;
+    border: 0;
+    background: transparent;
+    color: inherit;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover,
+    &.focused {
+      background: #303336;
+    }
+  }
+
+  .focused > .submenu {
+    display: flex !important;
+  }
+
+  .menu-item > .submenu {
+    display: none;
+    flex-flow: column nowrap;
+    width: max-content;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: #202224;
+    color: #fff;
+  }
+
+  .submenu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 12px 16px;
+
+    .label {
+      margin-right: 2rem;
+    }
+
+    .accelerator {
+      color: #c3c3c3;
+    }
+
+    &:not(.separator):hover {
+      background: #1c2028;
+    }
+
+    &.separator {
+      padding: 4px 8px;
+
+      hr {
+        width: 100%;
+        border-color: rgba(255, 255, 255, 0.25);
+        margin: 0;
+      }
+    }
+  }
+</style>