Hugging Face's logo

Spaces:
nixaut-codelabs
/
neural-nexus-ai
Running

App Files Community
nixaut-codelabs commited on
Commit
97163ac
·
verified ·
1 Parent(s): 7dbd1b0

sidebar is too minimal, make it larger and easy-readable

Browse files
Files changed (2) hide show
  1. components/sidebar.js +305 -55
  2. index.html +1 -1
components/sidebar.js CHANGED
@@ -1,3 +1,4 @@
 
1
  class CustomSidebar extends HTMLElement {
2
  constructor() {
3
  super();
@@ -11,10 +12,10 @@ class CustomSidebar extends HTMLElement {
11
  * { font-family: 'Inter', sans-serif; }
12
 
13
  .sidebar {
14
- width: 60px;
15
  background: #09090b;
16
  border-right: 1px solid #18181b;
17
- padding: 12px 0;
18
  overflow-y: auto;
19
  height: 100vh;
20
  position: fixed;
@@ -26,26 +27,60 @@ class CustomSidebar extends HTMLElement {
26
  flex-direction: column;
27
  }
28
 
29
- .sidebar-buttons {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  display: flex;
31
- flex-direction: column;
 
32
  gap: 8px;
33
- padding: 0 12px;
34
- margin-bottom: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  }
36
 
37
  .sidebar-btn {
38
- width: 36px;
39
- height: 36px;
40
  display: flex;
41
  align-items: center;
42
- justify-content: center;
 
 
43
  background: #18181b;
44
  border: 1px solid #27272a;
45
- border-radius: 8px;
46
  color: #71717a;
 
 
47
  cursor: pointer;
48
  transition: all 0.2s ease;
 
49
  }
50
 
51
  .sidebar-btn:hover {
@@ -55,43 +90,76 @@ class CustomSidebar extends HTMLElement {
55
  }
56
 
57
  .sidebar-btn svg {
58
- width: 18px;
59
- height: 18px;
 
60
  }
61
 
62
  .history-section {
63
  flex: 1;
64
- padding: 0 12px;
65
  overflow-y: auto;
 
66
  }
67
 
68
- .history-group {
69
- margin-bottom: 16px;
 
 
 
70
  }
71
 
72
  .history-title {
73
- font-size: 10px;
74
  font-weight: 600;
75
  color: #52525b;
76
  text-transform: uppercase;
77
  letter-spacing: 0.05em;
78
- margin-bottom: 8px;
79
- padding: 0 4px;
80
  }
81
 
82
- .chat-item {
83
- width: 36px;
84
- height: 36px;
 
 
 
 
 
85
  display: flex;
86
  align-items: center;
87
  justify-content: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  background: #18181b;
89
  border: 1px solid #27272a;
90
- border-radius: 8px;
91
  margin-bottom: 8px;
92
  cursor: pointer;
93
  transition: all 0.2s ease;
94
- position: relative;
95
  }
96
 
97
  .chat-item:hover {
@@ -108,6 +176,7 @@ class CustomSidebar extends HTMLElement {
108
  width: 18px;
109
  height: 18px;
110
  color: #71717a;
 
111
  }
112
 
113
  .chat-item:hover svg,
@@ -115,18 +184,61 @@ class CustomSidebar extends HTMLElement {
115
  color: #fafafa;
116
  }
117
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
  .user-button {
119
- width: 36px;
120
- height: 36px;
121
  display: flex;
122
  align-items: center;
123
- justify-content: center;
 
 
124
  background: #18181b;
125
  border: 1px solid #27272a;
126
- border-radius: 8px;
127
- margin: 16px 12px;
128
  cursor: pointer;
129
  transition: all 0.2s ease;
 
130
  }
131
 
132
  .user-button:hover {
@@ -135,8 +247,8 @@ class CustomSidebar extends HTMLElement {
135
  }
136
 
137
  .user-avatar {
138
- width: 22px;
139
- height: 22px;
140
  border-radius: 50%;
141
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
142
  display: flex;
@@ -144,11 +256,47 @@ class CustomSidebar extends HTMLElement {
144
  justify-content: center;
145
  color: white;
146
  font-weight: 600;
147
- font-size: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  }
149
 
150
  .sidebar::-webkit-scrollbar {
151
- width: 3px;
152
  }
153
 
154
  .sidebar::-webkit-scrollbar-track {
@@ -157,7 +305,7 @@ class CustomSidebar extends HTMLElement {
157
 
158
  .sidebar::-webkit-scrollbar-thumb {
159
  background: #525252;
160
- border-radius: 3px;
161
  }
162
 
163
  .sidebar::-webkit-scrollbar-thumb:hover {
@@ -167,6 +315,7 @@ class CustomSidebar extends HTMLElement {
167
  @media (max-width: 768px) {
168
  .sidebar {
169
  transform: translateX(-100%);
 
170
  }
171
 
172
  .sidebar.active {
@@ -176,80 +325,181 @@ class CustomSidebar extends HTMLElement {
176
  </style>
177
 
178
  <nav class="sidebar">
 
 
 
 
 
179
  <div class="sidebar-buttons">
180
- <button onclick="startNewChat()" class="sidebar-btn" title="New Chat">
181
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
182
  <path d="M12 5v14m-7-7h14"/>
183
  </svg>
 
184
  </button>
185
- <button onclick="window.location.href='/media'" class="sidebar-btn" title="Media">
186
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
187
  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
188
  <circle cx="8.5" cy="8.5" r="1.5"/>
189
  <path d="M21 15l-5-5L5 21"/>
190
  </svg>
 
191
  </button>
192
  </div>
193
 
194
  <div class="history-section">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
195
  <div class="history-group">
196
- <div class="history-title">Today</div>
197
- <div class="chat-item" data-id="1" onclick="loadChatHistory(1)" title="Website Redesign">
198
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
199
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
200
  </svg>
201
- </div>
202
- <div class="chat-item" data-id="2" onclick="loadChatHistory(2)" title="JS Performance Tips">
 
 
 
 
 
 
 
 
 
 
203
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
204
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
205
  </svg>
206
- </div>
207
- <div class="chat-item" data-id="3" onclick="loadChatHistory(3)" title="React Architecture">
 
 
 
 
 
 
 
 
 
 
208
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
209
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
210
  </svg>
211
- </div>
 
 
 
 
 
 
 
 
 
 
212
  </div>
213
 
214
  <div class="history-group">
215
  <div class="history-title">Yesterday</div>
216
- <div class="chat-item" data-id="4" onclick="loadChatHistory(4)" title="Data Analysis">
217
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
218
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
219
  </svg>
220
- </div>
221
- <div class="chat-item" data-id="5" onclick="loadChatHistory(5)" title="Cloud Architecture">
 
 
 
 
 
 
 
 
 
 
222
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
223
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
224
  </svg>
225
- </div>
 
 
 
 
 
 
 
 
 
 
226
  </div>
227
 
228
  <div class="history-group">
229
  <div class="history-title">Older</div>
230
- <div class="chat-item" data-id="6" onclick="loadChatHistory(6)" title="Database Optimization">
231
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
232
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
233
  </svg>
234
- </div>
235
- <div class="chat-item" data-id="7" onclick="loadChatHistory(7)" title="Security Best Practices">
 
 
 
 
 
 
 
 
 
 
236
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
237
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
238
  </svg>
239
- </div>
 
 
 
 
 
 
 
 
 
 
240
  </div>
241
  </div>
242
 
243
- <button onclick="openAccount()" class="user-button" title="User">
244
- <div class="user-avatar">U</div>
245
- </button>
 
 
 
 
 
 
 
 
 
246
  </nav>
247
  `;
248
 
249
  this.setupMobileMenu();
250
  }
251
-
252
- setupMobileMenu() {
253
  const menuButton = document.createElement('button');
254
  menuButton.className = 'mobile-menu-trigger';
255
  menuButton.innerHTML = `
 
1
+
2
  class CustomSidebar extends HTMLElement {
3
  constructor() {
4
  super();
 
12
  * { font-family: 'Inter', sans-serif; }
13
 
14
  .sidebar {
15
+ width: 280px;
16
  background: #09090b;
17
  border-right: 1px solid #18181b;
18
+ padding: 16px;
19
  overflow-y: auto;
20
  height: 100vh;
21
  position: fixed;
 
27
  flex-direction: column;
28
  }
29
 
30
+ .sidebar-header {
31
+ margin-bottom: 24px;
32
+ }
33
+
34
+ .sidebar-title {
35
+ font-size: 18px;
36
+ font-weight: 700;
37
+ color: #ffffff;
38
+ margin-bottom: 8px;
39
+ }
40
+
41
+ .sidebar-subtitle {
42
+ font-size: 12px;
43
+ color: #71717a;
44
+ }
45
+
46
+ .new-chat-btn {
47
  display: flex;
48
+ align-items: center;
49
+ justify-content: center;
50
  gap: 8px;
51
+ width: 100%;
52
+ padding: 12px;
53
+ background: #18181b;
54
+ border: 1px solid #27272a;
55
+ border-radius: 12px;
56
+ color: #ffffff;
57
+ font-size: 14px;
58
+ font-weight: 500;
59
+ cursor: pointer;
60
+ transition: all 0.2s ease;
61
+ margin-bottom: 8px;
62
+ }
63
+
64
+ .new-chat-btn:hover {
65
+ background: #27272a;
66
+ border-color: #3f3f46;
67
  }
68
 
69
  .sidebar-btn {
 
 
70
  display: flex;
71
  align-items: center;
72
+ gap: 12px;
73
+ width: 100%;
74
+ padding: 12px;
75
  background: #18181b;
76
  border: 1px solid #27272a;
77
+ border-radius: 12px;
78
  color: #71717a;
79
+ font-size: 14px;
80
+ font-weight: 500;
81
  cursor: pointer;
82
  transition: all 0.2s ease;
83
+ text-align: left;
84
  }
85
 
86
  .sidebar-btn:hover {
 
90
  }
91
 
92
  .sidebar-btn svg {
93
+ width: 20px;
94
+ height: 20px;
95
+ flex-shrink: 0;
96
  }
97
 
98
  .history-section {
99
  flex: 1;
 
100
  overflow-y: auto;
101
+ margin-top: 24px;
102
  }
103
 
104
+ .history-header {
105
+ display: flex;
106
+ align-items: center;
107
+ justify-content: space-between;
108
+ margin-bottom: 12px;
109
  }
110
 
111
  .history-title {
112
+ font-size: 12px;
113
  font-weight: 600;
114
  color: #52525b;
115
  text-transform: uppercase;
116
  letter-spacing: 0.05em;
 
 
117
  }
118
 
119
+ .history-actions {
120
+ display: flex;
121
+ gap: 8px;
122
+ }
123
+
124
+ .history-action-btn {
125
+ width: 24px;
126
+ height: 24px;
127
  display: flex;
128
  align-items: center;
129
  justify-content: center;
130
+ background: transparent;
131
+ border: none;
132
+ color: #52525b;
133
+ cursor: pointer;
134
+ transition: color 0.2s ease;
135
+ }
136
+
137
+ .history-action-btn:hover {
138
+ color: #ffffff;
139
+ }
140
+
141
+ .history-action-btn svg {
142
+ width: 14px;
143
+ height: 14px;
144
+ }
145
+
146
+ .history-group {
147
+ margin-bottom: 20px;
148
+ }
149
+
150
+ .chat-item {
151
+ display: flex;
152
+ align-items: center;
153
+ gap: 12px;
154
+ width: 100%;
155
+ padding: 10px 12px;
156
  background: #18181b;
157
  border: 1px solid #27272a;
158
+ border-radius: 10px;
159
  margin-bottom: 8px;
160
  cursor: pointer;
161
  transition: all 0.2s ease;
162
+ text-align: left;
163
  }
164
 
165
  .chat-item:hover {
 
176
  width: 18px;
177
  height: 18px;
178
  color: #71717a;
179
+ flex-shrink: 0;
180
  }
181
 
182
  .chat-item:hover svg,
 
184
  color: #fafafa;
185
  }
186
 
187
+ .chat-info {
188
+ flex: 1;
189
+ overflow: hidden;
190
+ }
191
+
192
+ .chat-title {
193
+ font-size: 13px;
194
+ font-weight: 500;
195
+ color: #ffffff;
196
+ white-space: nowrap;
197
+ overflow: hidden;
198
+ text-overflow: ellipsis;
199
+ margin-bottom: 2px;
200
+ }
201
+
202
+ .chat-meta {
203
+ font-size: 11px;
204
+ color: #71717a;
205
+ display: flex;
206
+ align-items: center;
207
+ gap: 8px;
208
+ }
209
+
210
+ .chat-time,
211
+ .chat-model {
212
+ display: flex;
213
+ align-items: center;
214
+ gap: 4px;
215
+ }
216
+
217
+ .model-dot {
218
+ width: 6px;
219
+ height: 6px;
220
+ border-radius: 50%;
221
+ display: inline-block;
222
+ }
223
+
224
+ .user-section {
225
+ margin-top: auto;
226
+ padding-top: 16px;
227
+ border-top: 1px solid #18181b;
228
+ }
229
+
230
  .user-button {
 
 
231
  display: flex;
232
  align-items: center;
233
+ gap: 12px;
234
+ width: 100%;
235
+ padding: 12px;
236
  background: #18181b;
237
  border: 1px solid #27272a;
238
+ border-radius: 12px;
 
239
  cursor: pointer;
240
  transition: all 0.2s ease;
241
+ text-align: left;
242
  }
243
 
244
  .user-button:hover {
 
247
  }
248
 
249
  .user-avatar {
250
+ width: 32px;
251
+ height: 32px;
252
  border-radius: 50%;
253
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
254
  display: flex;
 
256
  justify-content: center;
257
  color: white;
258
  font-weight: 600;
259
+ font-size: 14px;
260
+ flex-shrink: 0;
261
+ }
262
+
263
+ .user-info {
264
+ flex: 1;
265
+ }
266
+
267
+ .user-name {
268
+ font-size: 13px;
269
+ font-weight: 500;
270
+ color: #ffffff;
271
+ margin-bottom: 2px;
272
+ }
273
+
274
+ .user-plan {
275
+ font-size: 11px;
276
+ color: #a1a1aa;
277
+ }
278
+
279
+ .user-status {
280
+ display: flex;
281
+ align-items: center;
282
+ gap: 4px;
283
+ }
284
+
285
+ .status-dot {
286
+ width: 6px;
287
+ height: 6px;
288
+ border-radius: 50%;
289
+ background: #10b981;
290
+ animation: pulse 2s infinite;
291
+ }
292
+
293
+ @keyframes pulse {
294
+ 0%, 100% { opacity: 1; }
295
+ 50% { opacity: 0.5; }
296
  }
297
 
298
  .sidebar::-webkit-scrollbar {
299
+ width: 4px;
300
  }
301
 
302
  .sidebar::-webkit-scrollbar-track {
 
305
 
306
  .sidebar::-webkit-scrollbar-thumb {
307
  background: #525252;
308
+ border-radius: 2px;
309
  }
310
 
311
  .sidebar::-webkit-scrollbar-thumb:hover {
 
315
  @media (max-width: 768px) {
316
  .sidebar {
317
  transform: translateX(-100%);
318
+ width: 280px;
319
  }
320
 
321
  .sidebar.active {
 
325
  </style>
326
 
327
  <nav class="sidebar">
328
+ <div class="sidebar-header">
329
+ <h1 class="sidebar-title">Nixaut</h1>
330
+ <p class="sidebar-subtitle">AI Assistant</p>
331
+ </div>
332
+
333
  <div class="sidebar-buttons">
334
+ <button onclick="startNewChat()" class="new-chat-btn">
335
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
336
  <path d="M12 5v14m-7-7h14"/>
337
  </svg>
338
+ <span>New Chat</span>
339
  </button>
340
+ <button onclick="window.location.href='/media'" class="sidebar-btn">
341
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
342
  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
343
  <circle cx="8.5" cy="8.5" r="1.5"/>
344
  <path d="M21 15l-5-5L5 21"/>
345
  </svg>
346
+ <span>Media Library</span>
347
  </button>
348
  </div>
349
 
350
  <div class="history-section">
351
+ <div class="history-header">
352
+ <span class="history-title">Chat History</span>
353
+ <div class="history-actions">
354
+ <button class="history-action-btn" title="Search">
355
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
356
+ <circle cx="11" cy="11" r="8"/>
357
+ <path d="m21 21-4.35-4.35"/>
358
+ </svg>
359
+ </button>
360
+ <button class="history-action-btn" title="Clear">
361
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
362
+ <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14zM10 11v6M14 11v6"/>
363
+ </svg>
364
+ </button>
365
+ </div>
366
+ </div>
367
+
368
  <div class="history-group">
369
+ <button onclick="loadChatHistory(1)" class="chat-item" data-id="1">
 
370
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
371
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
372
  </svg>
373
+ <div class="chat-info">
374
+ <div class="chat-title">Website Redesign</div>
375
+ <div class="chat-meta">
376
+ <span class="chat-time">2:30 PM</span>
377
+ <span class="chat-model">
378
+ <span class="model-dot" style="background: #ffffff;"></span>
379
+ Max
380
+ </span>
381
+ </div>
382
+ </div>
383
+ </button>
384
+ <button onclick="loadChatHistory(2)" class="chat-item" data-id="2">
385
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
386
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
387
  </svg>
388
+ <div class="chat-info">
389
+ <div class="chat-title">JavaScript Performance Tips</div>
390
+ <div class="chat-meta">
391
+ <span class="chat-time">1:15 PM</span>
392
+ <span class="chat-model">
393
+ <span class="model-dot" style="background: #a1a1aa;"></span>
394
+ Turbo
395
+ </span>
396
+ </div>
397
+ </div>
398
+ </button>
399
+ <button onclick="loadChatHistory(3)" class="chat-item active" data-id="3">
400
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
401
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
402
  </svg>
403
+ <div class="chat-info">
404
+ <div class="chat-title">React Architecture</div>
405
+ <div class="chat-meta">
406
+ <span class="chat-time">11:45 AM</span>
407
+ <span class="chat-model">
408
+ <span class="model-dot" style="background: #71717a;"></span>
409
+ Lite
410
+ </span>
411
+ </div>
412
+ </div>
413
+ </button>
414
  </div>
415
 
416
  <div class="history-group">
417
  <div class="history-title">Yesterday</div>
418
+ <button onclick="loadChatHistory(4)" class="chat-item" data-id="4">
419
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
420
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
421
  </svg>
422
+ <div class="chat-info">
423
+ <div class="chat-title">Data Analysis Project</div>
424
+ <div class="chat-meta">
425
+ <span class="chat-time">6:20 PM</span>
426
+ <span class="chat-model">
427
+ <span class="model-dot" style="background: #d4d4d8;"></span>
428
+ Deep Research
429
+ </span>
430
+ </div>
431
+ </div>
432
+ </button>
433
+ <button onclick="loadChatHistory(5)" class="chat-item" data-id="5">
434
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
435
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
436
  </svg>
437
+ <div class="chat-info">
438
+ <div class="chat-title">Cloud Architecture Design</div>
439
+ <div class="chat-meta">
440
+ <span class="chat-time">4:10 PM</span>
441
+ <span class="chat-model">
442
+ <span class="model-dot" style="background: #ffffff;"></span>
443
+ Max
444
+ </span>
445
+ </div>
446
+ </div>
447
+ </button>
448
  </div>
449
 
450
  <div class="history-group">
451
  <div class="history-title">Older</div>
452
+ <button onclick="loadChatHistory(6)" class="chat-item" data-id="6">
453
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
454
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
455
  </svg>
456
+ <div class="chat-info">
457
+ <div class="chat-title">Database Optimization</div>
458
+ <div class="chat-meta">
459
+ <span class="chat-time">3 days ago</span>
460
+ <span class="chat-model">
461
+ <span class="model-dot" style="background: #a1a1aa;"></span>
462
+ Turbo
463
+ </span>
464
+ </div>
465
+ </div>
466
+ </button>
467
+ <button onclick="loadChatHistory(7)" class="chat-item" data-id="7">
468
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
469
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
470
  </svg>
471
+ <div class="chat-info">
472
+ <div class="chat-title">Security Best Practices</div>
473
+ <div class="chat-meta">
474
+ <span class="chat-time">5 days ago</span>
475
+ <span class="chat-model">
476
+ <span class="model-dot" style="background: #ffffff;"></span>
477
+ Max
478
+ </span>
479
+ </div>
480
+ </div>
481
+ </button>
482
  </div>
483
  </div>
484
 
485
+ <div class="user-section">
486
+ <button onclick="openAccount()" class="user-button">
487
+ <div class="user-avatar">U</div>
488
+ <div class="user-info">
489
+ <div class="user-name">User Account</div>
490
+ <div class="user-plan">Pro Plan</div>
491
+ </div>
492
+ <div class="user-status">
493
+ <div class="status-dot"></div>
494
+ </div>
495
+ </button>
496
+ </div>
497
  </nav>
498
  `;
499
 
500
  this.setupMobileMenu();
501
  }
502
+ setupMobileMenu() {
 
503
  const menuButton = document.createElement('button');
504
  menuButton.className = 'mobile-menu-trigger';
505
  menuButton.innerHTML = `
index.html CHANGED
@@ -64,7 +64,7 @@
64
  <custom-sidebar></custom-sidebar>
65
  <custom-sidebar></custom-sidebar>
66
  <!-- Main Chat Area -->
67
- <main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden max-h-full ml-[48px]">
68
  <!-- Chat Header -->
69
  <div class="bg-zinc-900/30 backdrop-blur-lg border-b border-zinc-800 p-4 flex items-center justify-between">
70
  <div class="flex items-center space-x-3">
 
64
  <custom-sidebar></custom-sidebar>
65
  <custom-sidebar></custom-sidebar>
66
  <!-- Main Chat Area -->
67
+ <main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden max-h-full ml-[280px]">
68
  <!-- Chat Header -->
69
  <div class="bg-zinc-900/30 backdrop-blur-lg border-b border-zinc-800 p-4 flex items-center justify-between">
70
  <div class="flex items-center space-x-3">