Hugging Face's logo

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

App Files Community
nixaut-codelabs commited on
Commit
189ea42
·
verified ·
1 Parent(s): 7f3fa46

headerı kaldır. Solda sidebarda olacak herşey. Hemde herşey. Sidebarı aşırı detaylı yap. Ayrıca sidebar ile textarea kısmındaki bağlantıyı kaldır. Textarea sohbet içinde gözükecek, sidebara bağlı olmayacak.

Browse files
Files changed (1) hide show
  1. components/header.js +3 -142
components/header.js CHANGED
@@ -1,148 +1,9 @@
 
1
  class CustomHeader extends HTMLElement {
2
  connectedCallback() {
3
  this.attachShadow({ mode: 'open' });
4
- this.shadowRoot.innerHTML = `
5
- <style>
6
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
7
- * { font-family: 'Inter', sans-serif; }
8
- .header-container {
9
- height: 64px;
10
- background: rgba(9, 9, 11, 0.8);
11
- backdrop-filter: blur(20px);
12
- -webkit-backdrop-filter: blur(20px);
13
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
14
- display: flex;
15
- align-items: center;
16
- justify-content: space-between;
17
- padding: 0 2rem;
18
- position: fixed;
19
- top: 0;
20
- left: 0;
21
- right: 0;
22
- z-index: 50;
23
- }
24
- .logo {
25
- display: flex;
26
- align-items: center;
27
- space-x: 3;
28
- cursor: pointer;
29
- transition: transform 0.2s ease;
30
- }
31
-
32
- .logo:hover {
33
- transform: scale(1.05);
34
- }
35
-
36
- .logo-text {
37
- font-size: 1.25rem;
38
- font-weight: 700;
39
- background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
40
- -webkit-background-clip: text;
41
- -webkit-text-fill-color: transparent;
42
- background-clip: text;
43
- }
44
-
45
- .logo-icon {
46
- width: 36px;
47
- height: 36px;
48
- border-radius: 12px;
49
- background: linear-gradient(135deg, #ffffff 0%, #6b7280 100%);
50
- display: flex;
51
- align-items: center;
52
- justify-content: center;
53
- box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
54
- }
55
-
56
- .nav-actions {
57
- display: flex;
58
- align-items: center;
59
- gap: 0.75rem;
60
- }
61
-
62
- .icon-btn {
63
- width: 40px;
64
- height: 40px;
65
- border-radius: 12px;
66
- background: rgba(255, 255, 255, 0.05);
67
- border: 1px solid rgba(255, 255, 255, 0.1);
68
- display: flex;
69
- align-items: center;
70
- justify-content: center;
71
- cursor: pointer;
72
- transition: all 0.2s ease;
73
- color: #9ca3af;
74
- }
75
-
76
- .icon-btn:hover {
77
- background: rgba(255, 255, 255, 0.1);
78
- color: #ffffff;
79
- transform: translateY(-2px);
80
- box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
81
- }
82
-
83
- .menu-toggle {
84
- display: none;
85
- }
86
-
87
- @media (max-width: 768px) {
88
- .header-container {
89
- padding: 0 1rem;
90
- }
91
-
92
- .logo-text span {
93
- display: none;
94
- }
95
-
96
- .menu-toggle {
97
- display: flex;
98
- }
99
- }
100
- </style>
101
-
102
- <header class="header-container">
103
- <div onclick="location.href='/'" class="logo">
104
- <div class="logo-icon">
105
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2">
106
- <path d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
107
- <path d="M12 2v6a2 2 0 002 2h6"/>
108
- </svg>
109
- </div>
110
- <div class="logo-text text-white">
111
- Nixaut <span>Copilot</span>
112
- </div>
113
- </div>
114
-
115
- <div class="nav-actions">
116
- <button onclick="toggleTheme()" class="icon-btn" data-tooltip="Toggle theme">
117
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
118
- <circle cx="12" cy="12" r="5"/>
119
- <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
120
- </svg>
121
- </button>
122
-
123
- <button onclick="showNotifications()" class="icon-btn" data-tooltip="Notifications">
124
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
125
- <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/>
126
- <path d="M13.73 21a2 2 0 01-3.46 0"/>
127
- </svg>
128
- </button>
129
-
130
- <button onclick="showUserMenu()" class="icon-btn" data-tooltip="User menu">
131
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
132
- <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
133
- <circle cx="12" cy="7" r="4"/>
134
- </svg>
135
- </button>
136
-
137
- <button onclick="toggleMobileSidebar()" class="icon-btn menu-toggle" data-tooltip="Menu">
138
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
139
- <path d="M3 12h18M3 6h18M3 18h18"/>
140
- </svg>
141
- </button>
142
- </div>
143
- </header>
144
- `;
145
  }
146
  }
147
 
148
- customElements.define('custom-header', CustomHeader);
 
1
+
2
  class CustomHeader extends HTMLElement {
3
  connectedCallback() {
4
  this.attachShadow({ mode: 'open' });
5
+ this.shadowRoot.innerHTML = ``;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  }
7
  }
8
 
9
+ customElements.define('custom-header', CustomHeader);