public/assets/discord.png

This is a binary file and will not be displayed.

public/assets/invertocat.png

This is a binary file and will not be displayed.

+2

src/components/sidebar.tsx

··· 19 19 import { ForwardRefExoticComponent, ReactNode } from "preact/compat"; 20 20 import { FontPicker } from "./fontPicker"; 21 21 import { NavUser } from "./auth/navUser"; 22 22 + import { ExternalLinksRow } from "./sidebarLinks"; 22 23 23 24 type BaseMenuItem = { 24 25 url: string; ··· 111 112 <FontPicker /> 112 113 <ColorToggle /> 113 114 </div> 115 115 + <ExternalLinksRow /> 114 116 </SidebarFooter> 115 117 <SidebarRail /> 116 118 </Sidebar>

+61

src/components/sidebarLinks.tsx

··· 1 1 + import { Coffee } from "lucide-react"; 2 2 + 3 3 + const externalLinks = [ 4 4 + { 5 5 + title: "Ko-fi", 6 6 + url: "https://ko-fi.com/uxieq", 7 7 + icon: <Coffee className="w-6 h-6" />, 8 8 + }, 9 9 + { 10 10 + title: "GitHub", 11 11 + url: "https://github.com/espeon/atptools", 12 12 + icon: ( 13 13 + <img 14 14 + src="/assets/invertocat.png" 15 15 + className="h-[1.35rem] mb-0.5 brightness-[10] hover:brightness-[999] dark:hover:brightness-[8] grayscale invert dark:invert-0" 16 16 + alt="Bluesky" 17 17 + /> 18 18 + ), 19 19 + }, 20 20 + { 21 21 + title: "Discord", 22 22 + url: "https://discord.gg/pgGM9n8ppf", 23 23 + icon: ( 24 24 + <img 25 25 + src="/assets/discord.png" 26 26 + className="w-6 brightness-[2.2] hover:brightness-[999] dark:hover:brightness-200 grayscale hover:grayscale-0 invert dark:invert-0" 27 27 + alt="Bluesky" 28 28 + /> 29 29 + ), 30 30 + }, 31 31 + { 32 32 + title: "Bluesky", 33 33 + url: "https://bsky.app/profile/did:plc:k644h4rq5bjfzcetgsa6tuby", 34 34 + icon: ( 35 35 + <img 36 36 + src="/assets/services/bluesky.png" 37 37 + className="w-6 brightness-[8.5] hover:brightness-[999] dark:hover:brightness-200 grayscale hover:grayscale-0 invert dark:invert-0" 38 38 + alt="Bluesky" 39 39 + /> 40 40 + ), 41 41 + }, 42 42 + // add more external links as desired 43 43 + ]; 44 44 + 45 45 + export function ExternalLinksRow() { 46 46 + return ( 47 47 + <div className="flex flex-row justify-end items-center px-2 py-1 gap-4"> 48 48 + {externalLinks.map((link) => ( 49 49 + <a 50 50 + key={link.title} 51 51 + href={link.url} 52 52 + target="_blank" 53 53 + rel="noopener noreferrer" 54 54 + className="flex items-center space-x-1 hover:text-primary hover:bg-muted-foreground/30 p-1 rounded-lg aspect-square *:transition-colors duration-200" 55 55 + > 56 56 + {link.icon} 57 57 + </a> 58 58 + ))} 59 59 + </div> 60 60 + ); 61 61 + }