Hugging Face's logo

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

App Files Community
nixaut-codelabs commited on
Commit
35f21d8
·
verified ·
1 Parent(s): bb9e08f

sola sidebar istiyorum minimal boyutlarda, "Today", "Yesterday" ve "Older" gruplarında mesaj geçmişiyle, en alta sabit kullanıcı butonuyla, en üstte New Chat ve Media butonlarıyla. Ayrıca bg-zinc-950 ve bg-zinc-900 temasına sadık. Hatalı tool call yapma

Browse files
Files changed (2) hide show
  1. components/sidebar.js +38 -38
  2. index.html +1 -1
components/sidebar.js CHANGED
@@ -40,10 +40,10 @@ class CustomSidebar extends HTMLElement {
40
  * { font-family: 'Inter', sans-serif; }
41
 
42
  .sidebar {
43
- width: 64px;
44
  background: #09090b;
45
- border-right: 1px solid #27272a;
46
- padding: 0.75rem 0;
47
  overflow-y: auto;
48
  height: 100vh;
49
  position: fixed;
@@ -58,66 +58,66 @@ class CustomSidebar extends HTMLElement {
58
  .sidebar-buttons {
59
  display: flex;
60
  flex-direction: column;
61
- gap: 0.5rem;
62
- padding: 0 0.75rem;
63
- margin-bottom: 1rem;
64
  }
65
 
66
  .sidebar-btn {
67
- width: 48px;
68
- height: 48px;
69
  display: flex;
70
  align-items: center;
71
  justify-content: center;
72
  background: #18181b;
73
  border: 1px solid #27272a;
74
- border-radius: 12px;
75
- color: #a1a1aa;
76
  cursor: pointer;
77
  transition: all 0.2s ease;
78
  }
79
 
80
  .sidebar-btn:hover {
81
  background: #27272a;
82
- color: #ffffff;
83
  border-color: #3f3f46;
84
  }
85
 
86
  .sidebar-btn svg {
87
- width: 20px;
88
- height: 20px;
89
  }
90
 
91
  .history-section {
92
  flex: 1;
93
- padding: 0 0.75rem;
94
  overflow-y: auto;
95
  }
96
 
97
  .history-group {
98
- margin-bottom: 1rem;
99
  }
100
 
101
  .history-title {
102
- font-size: 0.625rem;
103
  font-weight: 600;
104
  color: #52525b;
105
  text-transform: uppercase;
106
  letter-spacing: 0.05em;
107
- margin-bottom: 0.5rem;
108
- padding: 0 0.25rem;
109
  }
110
 
111
  .chat-item {
112
- width: 48px;
113
- height: 48px;
114
  display: flex;
115
  align-items: center;
116
  justify-content: center;
117
  background: #18181b;
118
  border: 1px solid #27272a;
119
- border-radius: 12px;
120
- margin-bottom: 0.5rem;
121
  cursor: pointer;
122
  transition: all 0.2s ease;
123
  position: relative;
@@ -134,26 +134,26 @@ class CustomSidebar extends HTMLElement {
134
  }
135
 
136
  .chat-item svg {
137
- width: 20px;
138
- height: 20px;
139
- color: #a1a1aa;
140
  }
141
 
142
  .chat-item:hover svg,
143
  .chat-item.active svg {
144
- color: #ffffff;
145
  }
146
 
147
  .user-button {
148
- width: 48px;
149
- height: 48px;
150
  display: flex;
151
  align-items: center;
152
  justify-content: center;
153
  background: #18181b;
154
  border: 1px solid #27272a;
155
- border-radius: 12px;
156
- margin: 1rem 0.75rem;
157
  cursor: pointer;
158
  transition: all 0.2s ease;
159
  }
@@ -164,8 +164,8 @@ class CustomSidebar extends HTMLElement {
164
  }
165
 
166
  .user-avatar {
167
- width: 28px;
168
- height: 28px;
169
  border-radius: 50%;
170
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
171
  display: flex;
@@ -173,7 +173,7 @@ class CustomSidebar extends HTMLElement {
173
  justify-content: center;
174
  color: white;
175
  font-weight: 600;
176
- font-size: 0.75rem;
177
  }
178
 
179
  .sidebar::-webkit-scrollbar {
@@ -286,13 +286,13 @@ class CustomSidebar extends HTMLElement {
286
  .mobile-menu-trigger {
287
  display: none;
288
  position: fixed;
289
- top: 0.75rem;
290
- left: 0.75rem;
291
  z-index: 50;
292
  background: #09090b;
293
- border: 1px solid #27272a;
294
  border-radius: 6px;
295
- padding: 0.5rem;
296
  cursor: pointer;
297
  }
298
 
@@ -302,7 +302,7 @@ class CustomSidebar extends HTMLElement {
302
  }
303
  }
304
  </style>
305
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
306
  <path d="M3 12h18M3 6h18M3 18h18"/>
307
  </svg>
308
  `;
 
40
  * { font-family: 'Inter', sans-serif; }
41
 
42
  .sidebar {
43
+ width: 60px;
44
  background: #09090b;
45
+ border-right: 1px solid #18181b;
46
+ padding: 12px 0;
47
  overflow-y: auto;
48
  height: 100vh;
49
  position: fixed;
 
58
  .sidebar-buttons {
59
  display: flex;
60
  flex-direction: column;
61
+ gap: 8px;
62
+ padding: 0 12px;
63
+ margin-bottom: 16px;
64
  }
65
 
66
  .sidebar-btn {
67
+ width: 36px;
68
+ height: 36px;
69
  display: flex;
70
  align-items: center;
71
  justify-content: center;
72
  background: #18181b;
73
  border: 1px solid #27272a;
74
+ border-radius: 8px;
75
+ color: #71717a;
76
  cursor: pointer;
77
  transition: all 0.2s ease;
78
  }
79
 
80
  .sidebar-btn:hover {
81
  background: #27272a;
82
+ color: #fafafa;
83
  border-color: #3f3f46;
84
  }
85
 
86
  .sidebar-btn svg {
87
+ width: 18px;
88
+ height: 18px;
89
  }
90
 
91
  .history-section {
92
  flex: 1;
93
+ padding: 0 12px;
94
  overflow-y: auto;
95
  }
96
 
97
  .history-group {
98
+ margin-bottom: 16px;
99
  }
100
 
101
  .history-title {
102
+ font-size: 10px;
103
  font-weight: 600;
104
  color: #52525b;
105
  text-transform: uppercase;
106
  letter-spacing: 0.05em;
107
+ margin-bottom: 8px;
108
+ padding: 0 4px;
109
  }
110
 
111
  .chat-item {
112
+ width: 36px;
113
+ height: 36px;
114
  display: flex;
115
  align-items: center;
116
  justify-content: center;
117
  background: #18181b;
118
  border: 1px solid #27272a;
119
+ border-radius: 8px;
120
+ margin-bottom: 8px;
121
  cursor: pointer;
122
  transition: all 0.2s ease;
123
  position: relative;
 
134
  }
135
 
136
  .chat-item svg {
137
+ width: 18px;
138
+ height: 18px;
139
+ color: #71717a;
140
  }
141
 
142
  .chat-item:hover svg,
143
  .chat-item.active svg {
144
+ color: #fafafa;
145
  }
146
 
147
  .user-button {
148
+ width: 36px;
149
+ height: 36px;
150
  display: flex;
151
  align-items: center;
152
  justify-content: center;
153
  background: #18181b;
154
  border: 1px solid #27272a;
155
+ border-radius: 8px;
156
+ margin: 16px 12px;
157
  cursor: pointer;
158
  transition: all 0.2s ease;
159
  }
 
164
  }
165
 
166
  .user-avatar {
167
+ width: 22px;
168
+ height: 22px;
169
  border-radius: 50%;
170
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
171
  display: flex;
 
173
  justify-content: center;
174
  color: white;
175
  font-weight: 600;
176
+ font-size: 10px;
177
  }
178
 
179
  .sidebar::-webkit-scrollbar {
 
286
  .mobile-menu-trigger {
287
  display: none;
288
  position: fixed;
289
+ top: 12px;
290
+ left: 12px;
291
  z-index: 50;
292
  background: #09090b;
293
+ border: 1px solid #18181b;
294
  border-radius: 6px;
295
+ padding: 8px;
296
  cursor: pointer;
297
  }
298
 
 
302
  }
303
  }
304
  </style>
305
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
306
  <path d="M3 12h18M3 6h18M3 18h18"/>
307
  </svg>
308
  `;
index.html CHANGED
@@ -63,7 +63,7 @@
63
  <div class="flex h-screen relative z-10">
64
  <custom-sidebar></custom-sidebar>
65
  <!-- Main Chat Area -->
66
- <main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden max-h-full ml-0">
67
  <!-- Chat Header -->
68
  <div class="bg-zinc-900/30 backdrop-blur-lg border-b border-zinc-800 p-4 flex items-center justify-between">
69
  <div class="flex items-center space-x-3">
 
63
  <div class="flex h-screen relative z-10">
64
  <custom-sidebar></custom-sidebar>
65
  <!-- Main Chat Area -->
66
+ <main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden max-h-full ml-[60px]">
67
  <!-- Chat Header -->
68
  <div class="bg-zinc-900/30 backdrop-blur-lg border-b border-zinc-800 p-4 flex items-center justify-between">
69
  <div class="flex items-center space-x-3">