👁️
flesh out nav menu
+111
-4
+111
-4
src/components/Header.tsx
+111
-4
src/components/Header.tsx
···
1
1
import { Link, useLocation } from "@tanstack/react-router";
2
-
import { Home, Library, LogIn, Menu, Moon, Search, Sun, X } from "lucide-react";
2
+
import {
3
+
FolderPlus,
4
+
Home,
5
+
Import,
6
+
List,
7
+
LogIn,
8
+
Menu,
9
+
Moon,
10
+
Rows3,
11
+
Search,
12
+
Sun,
13
+
X,
14
+
} from "lucide-react";
3
15
import { useState } from "react";
4
16
import { RETURN_TO_KEY, useAuth } from "@/lib/useAuth";
5
17
import { useTheme } from "@/lib/useTheme";
···
97
109
)}
98
110
99
111
<aside
100
-
className={`fixed top-0 left-0 h-full w-80 bg-white dark:bg-zinc-900 text-gray-900 dark:text-zinc-100 shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
101
-
isOpen ? "translate-x-0" : "-translate-x-full"
112
+
className={`fixed top-0 left-0 h-full w-80 bg-white dark:bg-zinc-900 text-gray-900 dark:text-zinc-100 z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
113
+
isOpen ? "translate-x-0 shadow-2xl" : "-translate-x-full"
102
114
}`}
103
115
>
104
116
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-zinc-600">
···
141
153
className: "bg-cyan-700 hover:bg-cyan-600 text-white",
142
154
}}
143
155
>
144
-
<Library size={20} />
156
+
<Search size={20} />
145
157
<span className="font-medium">Card Browser</span>
146
158
</Link>
159
+
160
+
{session && (
161
+
<>
162
+
<div className="border-t border-gray-200 dark:border-zinc-700 my-3" />
163
+
164
+
<Link
165
+
to="/deck/new"
166
+
onClick={() => setIsOpen(false)}
167
+
className="flex items-center gap-3 p-3 rounded-lg transition-colors mb-2"
168
+
inactiveProps={{
169
+
className: "hover:bg-gray-100 dark:hover:bg-zinc-800",
170
+
}}
171
+
activeProps={{
172
+
className: "bg-cyan-700 hover:bg-cyan-600 text-white",
173
+
}}
174
+
>
175
+
<FolderPlus size={20} />
176
+
<span className="font-medium">New Deck</span>
177
+
</Link>
178
+
179
+
<Link
180
+
to="/deck/import"
181
+
search={{ format: undefined }}
182
+
onClick={() => setIsOpen(false)}
183
+
className="flex items-center gap-3 p-3 rounded-lg transition-colors mb-2"
184
+
inactiveProps={{
185
+
className: "hover:bg-gray-100 dark:hover:bg-zinc-800",
186
+
}}
187
+
activeProps={{
188
+
className: "bg-cyan-700 hover:bg-cyan-600 text-white",
189
+
}}
190
+
>
191
+
<Import size={20} />
192
+
<span className="font-medium">Import Deck</span>
193
+
</Link>
194
+
195
+
<div className="border-t border-gray-200 dark:border-zinc-700 my-3" />
196
+
197
+
<Link
198
+
to="/profile/$did"
199
+
params={{ did: session.info.sub }}
200
+
onClick={() => setIsOpen(false)}
201
+
className="flex items-center gap-3 p-3 rounded-lg transition-colors mb-2"
202
+
inactiveProps={{
203
+
className: "hover:bg-gray-100 dark:hover:bg-zinc-800",
204
+
}}
205
+
activeProps={{
206
+
className: "bg-cyan-700 hover:bg-cyan-600 text-white",
207
+
}}
208
+
>
209
+
<Rows3 size={20} />
210
+
<span className="font-medium">My Decks</span>
211
+
</Link>
212
+
213
+
<Link
214
+
to="/profile/$did/lists"
215
+
params={{ did: session.info.sub }}
216
+
onClick={() => setIsOpen(false)}
217
+
className="flex items-center gap-3 p-3 rounded-lg transition-colors mb-2"
218
+
inactiveProps={{
219
+
className: "hover:bg-gray-100 dark:hover:bg-zinc-800",
220
+
}}
221
+
activeProps={{
222
+
className: "bg-cyan-700 hover:bg-cyan-600 text-white",
223
+
}}
224
+
>
225
+
<List size={20} />
226
+
<span className="font-medium">My Lists</span>
227
+
</Link>
228
+
</>
229
+
)}
230
+
231
+
{!session && !isLoading && (
232
+
<>
233
+
<div className="border-t border-gray-200 dark:border-zinc-700 my-3" />
234
+
235
+
<Link
236
+
to="/signin"
237
+
onClick={() => {
238
+
handleSignInClick();
239
+
setIsOpen(false);
240
+
}}
241
+
className="flex items-center gap-3 p-3 rounded-lg transition-colors mb-2"
242
+
inactiveProps={{
243
+
className: "hover:bg-gray-100 dark:hover:bg-zinc-800",
244
+
}}
245
+
activeProps={{
246
+
className: "bg-cyan-700 hover:bg-cyan-600 text-white",
247
+
}}
248
+
>
249
+
<LogIn size={20} />
250
+
<span className="font-medium">Sign In</span>
251
+
</Link>
252
+
</>
253
+
)}
147
254
</nav>
148
255
</aside>
149
256
</>