Skip to content

feat: add custom title bar with platform-specific controls #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vuon9 merged 1 commit into from
Feb 11, 2026
Merged

feat: add custom title bar with platform-specific controls #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 102 additions & 21 deletions frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,18 @@

.app-container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
overflow: hidden;
}

.app-body {
display: flex;
flex: 1;
overflow: hidden;
}

.main-content {
flex: 1;
height: 100%;
Expand All @@ -32,34 +39,14 @@
transition: margin-left 0.3s ease, width 0.3s ease, opacity 0.3s ease;
overflow: hidden;
flex-shrink: 0;
height: 100%;
}

.sidebar.hidden {
margin-left: -260px;
opacity: 0;
}

.logo-area {
padding: 16px 20px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--border-color);
min-height: 65px;
}

.logo-area img {
width: 64px;
height: 64px;
}

.logo-area h1 {
font-size: 1.1rem;
font-weight: 600;
margin: 0;
white-space: nowrap;
}

.nav-scroll-area {
flex: 1;
overflow-y: auto;
Expand Down Expand Up @@ -189,6 +176,100 @@
color: var(--text-primary);
}

/* Title Bar Styles */
.titlebar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--cds-layer);
border-bottom: 1px solid var(--border-color);
height: 38px;
min-height: 38px;
flex-shrink: 0;
-webkit-app-region: drag;
user-select: none;
}

.titlebar.macos {
padding-left: 80px;
}

.titlebar.other-platform {
padding: 0 8px;
}

.titlebar-left,
.titlebar-right {
display: flex;
align-items: center;
gap: 4px;
-webkit-app-region: no-drag;
}

.titlebar-center {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}

.titlebar-appname {
font-size: 14px;
font-weight: 500;
color: var(--cds-text-primary);
letter-spacing: 0.2px;
}

.titlebar-sidebar-toggle {
margin-right: 4px;
}

/* Window controls for non-macOS platforms */
.window-controls {
display: flex;
align-items: center;
gap: 2px;
}

.window-control-btn {
padding: 4px;
border-radius: 4px;
transition: all 0.2s ease;
}

.window-control-btn:hover {
background-color: var(--cds-layer-hover);
}

.window-control-btn.close:hover {
background-color: #ff5f57;
color: white;
}

/* Titlebar settings */
.titlebar-settings {
margin-right: 4px;
}

/* Update main-content to account for title bar */
.main-content {
flex: 1;
height: 100%;
overflow: auto;
position: relative;
background-color: var(--bg-color);
transition: margin-left 0.3s ease;
display: flex;
flex-direction: column;
}

.content-area {
flex: 1;
overflow-y: auto;
padding: 24px;
margin-top: 0;
}

/* Tool Container and Panes (Same as before) */
.tool-container {
max-width: 1400px;
Expand Down
97 changes: 20 additions & 77 deletions frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react';
import './App.css';
import { Sidebar } from './components/Sidebar';
import { Theme, IconButton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
import { Settings } from '@carbon/icons-react';
import { TitleBar } from './components/TitleBar';
import { Theme } from '@carbon/react';

// Tools Imports
import DateTimeConverter from './pages/DateTimeConverter';
Expand Down Expand Up @@ -119,83 +119,26 @@ function App() {
<ErrorBoundary>
<Theme theme={theme} style={{ height: '100%' }}>
<div className="app-container">
<Sidebar
activeTool={activeTool}
setActiveTool={setActiveTool}
isVisible={isSidebarOpen}
<TitleBar
isSidebarOpen={isSidebarOpen}
toggleSidebar={toggleSidebar}
themeMode={themeMode}
setThemeMode={setThemeMode}
/>

<main className="main-content">
{/* Top Bar Area for Toggle & Settings */}
<div style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: '48px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 16px',
zIndex: 900,
pointerEvents: 'none' /* Passthrough to tool interactions if no header bg */
}}>
<div style={{ pointerEvents: 'auto' }}>
{!isSidebarOpen && (
<IconButton
kind="ghost"
size="sm"
onClick={toggleSidebar}
label="Toggle Sidebar"
align="bottom"
className="cds-icon-btn" // Ensuring Carbon class
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</IconButton>
)}
</div>

<div style={{ pointerEvents: 'auto' }}>
<OverflowMenu
renderIcon={Settings}
flipped
size="sm"
ariaLabel="Settings"
iconDescription="Settings"
title="Theme Settings"
>
<OverflowMenuItem itemText="System Theme" onClick={() => setThemeMode('system')} requireTitle />
<OverflowMenuItem itemText="Dark Theme" onClick={() => setThemeMode('dark')} requireTitle />
<OverflowMenuItem itemText="Light Theme" onClick={() => setThemeMode('light')} requireTitle />
</OverflowMenu>

<div className="app-body">
<Sidebar
activeTool={activeTool}
setActiveTool={setActiveTool}
isVisible={isSidebarOpen}
/>

<main className="main-content">
<div className="content-area">
{renderTool()}
</div>
</div>


<div className="content-area" style={{ marginTop: '0px' }}>
{renderTool()}
</div>
</main>

{isSidebarOpen && (
<div style={{ position: 'absolute', top: '10px', left: '215px', zIndex: 900 }}>
<IconButton
kind="ghost"
size="sm"
onClick={toggleSidebar}
label="Close Sidebar"
align="bottom"
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M18 6L6 18M6 6l12 12"></path>
</svg>
</IconButton>
</div>
)}
</main>
</div>
</div>
</Theme>
</ErrorBoundary>
Expand Down
25 changes: 15 additions & 10 deletions frontend/src/components/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react';
import logo from '../assets/images/logo-universal.png';

export function Sidebar({ activeTool, setActiveTool, isVisible, toggleSidebar }) {
export function Sidebar({ activeTool, setActiveTool, isVisible }) {
const [searchTerm, setSearchTerm] = useState('');
const [pinned, setPinned] = useState(() => {
try {
Expand Down Expand Up @@ -52,18 +51,22 @@ export function Sidebar({ activeTool, setActiveTool, isVisible, toggleSidebar })

return (
<div className={`sidebar ${!isVisible ? 'hidden' : ''}`}>
<div className="logo-area">
<img src={logo} alt="Logo" />
<h1>DevToolbox</h1>
</div>

<div style={{ padding: '10px 10px 0', minHeight: '52px' }}>
{/* Search bar at the top */}
<div style={{ padding: '12px 12px 8px' }}>
<input
type="text"
placeholder="Search..."
placeholder="Search tools..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
style={{ width: '100%', padding: '6px 10px', fontSize: '13px', backgroundColor: 'rgba(0,0,0,0.2)', border: '1px solid var(--border-color)' }}
style={{
width: '100%',
padding: '8px 12px',
fontSize: '13px',
backgroundColor: 'var(--cds-field)',
border: '1px solid var(--border-color)',
borderRadius: '4px',
color: 'var(--cds-text-primary)'
}}
/>
</div>

Expand Down Expand Up @@ -134,3 +137,5 @@ export function Sidebar({ activeTool, setActiveTool, isVisible, toggleSidebar })
</div>
);
}

export default Sidebar;
Loading