JosLe/logic-gates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: toolbar sections as dropdown menus

Browse Source 
Replace horizontal toolbar sections with dropdown buttons (I/O, Gates,
Components). Each opens a dropdown menu on click, keeping the toolbar
clean and compact. Dropdowns close on outside click or after selecting
a gate.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jose Luis
2026-03-20 03:14:43 +01:00
parent 53d600fcb0
commit 2a58ad372e
4 changed files with 135 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
index.html
View File

@@ -10,22 +10,20 @@
<div id="toolbar">
<span class="logo">⚡ Logic Lab</span>
<!-- I/O Section -->
<div class="toolbar-section">
<div class="section-label">I/O</div>
<div class="section-buttons">
<!-- I/O Dropdown -->
<div class="toolbar-dropdown">
<button class="dropdown-toggle">I/O <span class="dropdown-arrow">▾</span></button>
<div class="dropdown-menu">
<button class="gate-btn input-btn" data-gate="INPUT">INPUT</button>
<button class="gate-btn clock-btn" data-gate="CLOCK">CLOCK</button>
<button class="gate-btn output-btn" data-gate="OUTPUT">OUTPUT</button>
</div>
</div>
<div class="separator"></div>
<!-- Gates Section -->
<div class="toolbar-section">
<div class="section-label">Gates</div>
<div class="section-buttons">
<!-- Gates Dropdown -->
<div class="toolbar-dropdown">
<button class="dropdown-toggle">Gates <span class="dropdown-arrow">▾</span></button>
<div class="dropdown-menu">
<button class="gate-btn" data-gate="AND">AND</button>
<button class="gate-btn" data-gate="OR">OR</button>
<button class="gate-btn" data-gate="NOT">NOT</button>
@@ -35,19 +33,15 @@
</div>
</div>
<div class="separator"></div>
<!-- Components Section -->
<div class="toolbar-section" id="components-section">
<div class="section-label">Components</div>
<div class="section-buttons">
<!-- Components Dropdown -->
<div class="toolbar-dropdown" id="components-section">
<button class="dropdown-toggle">Components <span class="dropdown-arrow">▾</span></button>
<div class="dropdown-menu" id="components-menu">
<button class="create-component-btn" id="create-component-btn" title="Create custom component">✚ Create</button>
<div id="saved-components"></div>
</div>
</div>
<div class="separator"></div>
<button class="action-btn sim-btn" id="sim-btn">Waveform</button>
<div class="toolbar-right">
<button class="action-btn export-btn" id="export-btn" title="Export circuit">↓ Export</button>