diff --git a/src/main/index.ts b/src/main/index.ts index 8aaea9a..d866500 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -15,6 +15,7 @@ function createWindow(): void { minWidth: 900, minHeight: 600, title: 'Hohoff Editor', + titleBarStyle: 'hiddenInset', show: false, webPreferences: { preload: join(__dirname, '../preload/index.js'), diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index d776720..35e1caa 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -32,6 +32,9 @@ export default function App(): JSX.Element { return (
+
+ Hohoff Editor +
diff --git a/src/renderer/styles/app.css b/src/renderer/styles/app.css index d9b2be0..b8b9327 100644 --- a/src/renderer/styles/app.css +++ b/src/renderer/styles/app.css @@ -1,11 +1,33 @@ .app-layout { display: grid; grid-template-columns: 220px 1fr 340px; - grid-template-rows: 100vh; + grid-template-rows: 38px calc(100vh - 38px); height: 100vh; overflow: hidden; } +.app-titlebar { + grid-column: 1 / -1; + display: flex; + align-items: center; + justify-content: center; + background: var(--sidebar-bg); + border-bottom: 1px solid var(--border); + /* Makes the entire bar draggable so the window can be moved */ + -webkit-app-region: drag; + user-select: none; + position: relative; +} + +.app-titlebar-title { + font-size: 12px; + font-family: var(--font-sans); + font-weight: 600; + letter-spacing: 0.08em; + color: var(--text-muted); + text-transform: uppercase; +} + /* ─── Sidebar ──────────────────────────────────────────────────── */ .sidebar { background: var(--sidebar-bg);