👁️
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

flesh out nav menu

+111 -4
+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 </>