Skip to content

Commit 36f0341

Browse files
icecoldaswinicecoldaswin
committed
Sidebar betterment
1 parent 2aa2b6f commit 36f0341

1 file changed

Lines changed: 74 additions & 12 deletions

File tree

‎templates/index.html‎

Lines changed: 74 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -70,26 +70,62 @@
7070
#atMentionPopup { position: fixed; z-index: 650; background: #1e293b; border: 1px solid #334155; border-radius: 8px; max-height: 180px; overflow-y: auto; display: none; width: 280px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
7171
.at-mention-item { padding: 8px 12px; cursor: pointer; font-size: 11px; font-weight: 700; color: #94a3b8; display: flex; justify-content: space-between; }
7272
.at-mention-item:hover { background: #3b82f6; color: white; }
73+
74+
/* Sidebar width when collapsed */
75+
.sidebar-collapsed {
76+
width: 60px !important;
77+
}
78+
79+
/* Vertical text for list items */
80+
.sidebar-collapsed #sidebarList .list-item-text {
81+
writing-mode: vertical-rl;
82+
transform: rotate(180deg);
83+
white-space: nowrap;
84+
font-size: 10px;
85+
margin: 0 auto;
86+
}
87+
88+
/* Header adjustments */
89+
.sidebar-collapsed #headerTopRow {
90+
flex-direction: column;
91+
}
92+
93+
.sidebar-collapsed #sidebarTitle {
94+
font-size: 12px;
95+
margin-bottom: 10px;
96+
}
97+
98+
.sidebar-collapsed #sidebarFooter {
99+
display: none;
100+
}
73101
</style>
74102
</head>
75103
<body class="flex h-screen w-screen">
76104

77-
<aside class="w-64 border-r border-slate-800 bg-slate-900/50 flex flex-col">
78-
<div class="p-6 border-b border-slate-800 flex justify-between items-center">
79-
<h1 class="font-black text-xl tracking-tighter text-blue-500 italic">PATTERN_</h1>
80-
<button onclick="toggleModal(true)" class="bg-blue-600 hover:bg-blue-500 text-white w-8 h-8 rounded-full font-bold flex items-center justify-center transition">+</button>
105+
<aside class="w-64 border-r border-slate-800 bg-slate-900/50 flex flex-col transition-all duration-300 ease-in-out group" id="sidebar-plus-title">
106+
<div class="p-6 border-b border-slate-800 flex flex-col items-center gap-4 transition-all" id="sidebarHeader">
107+
<div class="flex justify-between items-center w-full" id="headerTopRow">
108+
<h1 id="sidebarTitle" class="font-black text-xl tracking-tighter text-blue-500 italic transition-all">PATTERN_</h1>
109+
<button onclick="hamburgerHandler()" class="text-slate-400 hover:text-white transition">
110+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
111+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
112+
</svg>
113+
</button>
114+
</div>
115+
<button id="plusBtn" onclick="toggleModal(true)" class="bg-blue-600 hover:bg-blue-500 text-white w-8 h-8 rounded-full font-bold flex items-center justify-center transition">+</button>
81116
</div>
82-
<div id="sidebarList" class="flex-1 overflow-y-auto p-4 space-y-2 custom-scroll">
117+
118+
<div id="sidebarList"
119+
onmouseenter="sideBarHoverHandler(true)"
120+
onmouseleave="sideBarHoverHandler(false)"
121+
class="flex-1 overflow-y-auto p-4 space-y-2 custom-scroll transition-all">
83122
</div>
84-
<div class="p-4 bg-slate-950 border-t border-slate-800 space-y-2">
123+
124+
<div id="sidebarFooter" class="p-4 bg-slate-950 border-t border-slate-800 space-y-2 transition-opacity">
85125
<div class="flex gap-1">
86-
<input id="apiKeyInput" type="password" placeholder="Gemini API Key" class="flex-1 bg-slate-900 border border-slate-700 text-[10px] text-slate-300 px-2 py-1 rounded outline-none focus:border-blue-500">
87-
<button onclick="saveGeminiKey()" class="bg-blue-600 text-white text-[9px] font-black px-2 py-1 rounded hover:bg-blue-500">Set</button>
88-
<button onclick="document.getElementById('lcSeedWrap').classList.toggle('hidden')" title="Paste LeetCode problem list" class="bg-slate-700 text-white text-[9px] px-1.5 py-1 rounded hover:bg-slate-600">📋</button>
126+
<input id="apiKeyInput" type="password" placeholder="Key" class="flex-1 bg-slate-900 border border-slate-700 text-[10px] text-slate-300 px-2 py-1 rounded outline-none focus:border-blue-500">
127+
<button onclick="saveGeminiKey()" class="bg-blue-600 text-white text-[9px] font-black px-2 py-1 rounded">Set</button>
89128
</div>
90-
<div id="lcSeedWrap" class="hidden"><textarea id="lcSeedInput" rows="3" placeholder="Paste LeetCode JSON blob, press Enter" class="w-full bg-slate-900 border border-slate-700 text-[9px] text-slate-300 px-2 py-1 rounded outline-none focus:border-blue-500 resize-none" onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();seedLCFromPaste()}"></textarea></div>
91-
<div id="apiKeyStatus" class="text-[9px] text-green-400 text-center"></div>
92-
<div id="syncStatus" class="text-[9px] font-black text-slate-600 uppercase tracking-widest text-center">Engine Standby</div>
93129
</div>
94130
</aside>
95131

@@ -284,6 +320,32 @@ <h3 class="text-xl font-black text-white mb-6 tracking-tighter italic">OPEN NEW
284320
let serverAvailable = false;
285321
let maximizedEditor = null;
286322

323+
let isManuallyCollapsed = false;
324+
325+
function hamburgerHandler() {
326+
const sidebar = document.getElementById('sidebar-plus-title');
327+
isManuallyCollapsed = !sidebar.classList.contains('sidebar-collapsed');
328+
329+
if (isManuallyCollapsed) {
330+
sidebar.classList.add('sidebar-collapsed');
331+
} else {
332+
sidebar.classList.remove('sidebar-collapsed');
333+
}
334+
}
335+
336+
function sideBarHoverHandler(isHovering) {
337+
const sidebar = document.getElementById('sidebar-plus-title');
338+
339+
// Only auto-expand if the user previously collapsed it via hamburger
340+
if (isManuallyCollapsed) {
341+
if (isHovering) {
342+
sidebar.classList.remove('sidebar-collapsed');
343+
} else {
344+
sidebar.classList.add('sidebar-collapsed');
345+
}
346+
}
347+
}
348+
287349
const genMgr = {
288350
_active: null, _done: new Set(),
289351
busy() { return !!this._active; },

0 commit comments

Comments
 (0)