feat: add sidebar panel system with icon strip and panel toggle

This commit is contained in:
2026-03-04 15:45:34 +05:30
parent ed48f254f1
commit affe1a7e33
4 changed files with 247 additions and 2 deletions
+45 -2
View File
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles-modern.css">
<link rel="stylesheet" href="styles-concreteinfo.css">
<link rel="stylesheet" href="styles-sidebar.css">
<!-- Load external resources asynchronously -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" media="print" onload="this.media='all'">
<script defer src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
@@ -1293,7 +1294,48 @@
</div>
</div>
<div class="editor-container">
<div class="main-content" id="main-content">
<!-- Sidebar -->
<div class="sidebar collapsed" id="sidebar">
<div class="sidebar-icons">
<button class="sidebar-icon" data-panel="explorer" title="File Explorer (Ctrl+Shift+E)">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
</svg>
</button>
<button class="sidebar-icon" data-panel="git" title="Git (Ctrl+Shift+G)">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="6" y1="3" x2="6" y2="15"/>
<circle cx="18" cy="6" r="3"/>
<circle cx="6" cy="6" r="3"/>
<path d="M18 9a9 9 0 01-9 9"/>
</svg>
</button>
<button class="sidebar-icon" data-panel="snippets" title="Snippets (Ctrl+Shift+S)">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="16 18 22 12 16 6"/>
<polyline points="8 6 2 12 8 18"/>
</svg>
</button>
<button class="sidebar-icon" data-panel="templates" title="Templates">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<line x1="3" y1="9" x2="21" y2="9"/>
<line x1="9" y1="21" x2="9" y2="9"/>
</svg>
</button>
</div>
<div class="sidebar-panel" id="sidebar-panel">
<div class="sidebar-panel-header">
<span class="sidebar-panel-title"></span>
<button class="sidebar-panel-close" title="Close panel">&times;</button>
</div>
<div class="sidebar-panel-content" id="sidebar-panel-content"></div>
</div>
</div>
<!-- Editor Container -->
<div class="editor-container">
<div class="tab-content active" id="tab-content-1" data-tab-id="1">
<div id="editor-pane-1" class="pane">
<div class="editor-wrapper">
@@ -1403,8 +1445,9 @@
<canvas id="pdf-canvas"></canvas>
</div>
</div>
</div>
</div>
<div class="status-bar">
<span id="status-text">Ready</span>
<span id="word-count">Words: 0 | Characters: 0</span>