xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

final touch

This commit is contained in:
daniel31x13 2023-12-17 23:55:38 -05:00
parent a6e0af6b6e
commit 7131fde897
2 changed files with 47 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/Sidebar.tsx
View File

@ -44,27 +44,31 @@ export default function Sidebar({ className }: { className?: string }) {
return ( return (
<div <div
id="sidebar" id="sidebar"
className={`bg-base-200 h-full w-64 xl:w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content px-2 z-20 ${ className={`bg-base-200 h-full w-64 xl:w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 ${
className || "" className || ""
}`} }`}
> >
<div className="grid grid-cols-2 gap-1 mt-2"> <div className="grid grid-cols-2 gap-2">
<SidebarHighlightLink title={"Dashboard"} <SidebarHighlightLink
title={"Dashboard"}
href={`/dashboard`} href={`/dashboard`}
icon={"bi-house"} icon={"bi-house"}
active={active === `/dashboard`} active={active === `/dashboard`}
/> />
<SidebarHighlightLink title={"Pinned"} <SidebarHighlightLink
title={"Pinned"}
href={`/links/pinned`} href={`/links/pinned`}
icon={"bi-pin-angle"} icon={"bi-pin-angle"}
active={active === `/links/pinned`} active={active === `/links/pinned`}
/> />
<SidebarHighlightLink title={"All Links"} <SidebarHighlightLink
title={"All Links"}
href={`/links`} href={`/links`}
icon={"bi-link-45deg"} icon={"bi-link-45deg"}
active={active === `/links`} active={active === `/links`}
/> />
<SidebarHighlightLink title={"All Collections"} <SidebarHighlightLink
title={"All Collections"}
href={`/collections`} href={`/collections`}
icon={"bi-folder2"} icon={"bi-folder2"}
active={active === `/collections`} active={active === `/collections`}

36
components/SidebarHighlightLink.tsx
View File

@ -1,26 +1,38 @@
import Link from "next/link"; import Link from "next/link";
export default function SidebarHighlightLink({ title, href, icon, active }: { export default function SidebarHighlightLink({
title: string, title,
href: string, href,
icon: string, icon,
active?: boolean active,
}: {
title: string;
href: string;
icon: string;
active?: boolean;
}) { }) {
return ( return (
<Link href={href}> <Link href={href}>
<div <div
className={`${ className={`${
active || false ? "bg-primary/20" : "bg-white/5 hover:bg-neutral/20" active || false
} duration-100 px-3 py-2 cursor-pointer gap-2 w-full rounded-lg capitalize`} ? "bg-primary/20"
: "bg-neutral-content/20 hover:bg-neutral/20"
} duration-200 px-3 py-2 cursor-pointer gap-2 w-full rounded-lg capitalize`}
> >
<div className={"w-8 h-8 inline-flex items-center justify-center bg-white/5 rounded-full"}> <div
<i className={`${icon} text-primary text-xl drop-shadow`}></i> className={
"w-10 h-10 inline-flex items-center justify-center bg-black/10 dark:bg-white/5 rounded-full"
}
>
<i className={`${icon} text-primary text-2xl drop-shadow`}></i>
</div> </div>
<div className={"mt-1"}> <div className={"mt-1"}>
<p className="truncate w-full text-xs sm:text-sm">{title}</p> <p className="truncate w-full text-xs font-semibold xl:text-sm">
{title}
</p>
</div> </div>
</div> </div>
</Link> </Link>
) );
} }