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 (
<div
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 || ""
}`}
>
<div className="grid grid-cols-2 gap-1 mt-2">
<SidebarHighlightLink title={"Dashboard"}
<div className="grid grid-cols-2 gap-2">
<SidebarHighlightLink
title={"Dashboard"}
href={`/dashboard`}
icon={"bi-house"}
active={active === `/dashboard`}
/>
<SidebarHighlightLink title={"Pinned"}
<SidebarHighlightLink
title={"Pinned"}
href={`/links/pinned`}
icon={"bi-pin-angle"}
active={active === `/links/pinned`}
/>
<SidebarHighlightLink title={"All Links"}
<SidebarHighlightLink
title={"All Links"}
href={`/links`}
icon={"bi-link-45deg"}
active={active === `/links`}
/>
<SidebarHighlightLink title={"All Collections"}
<SidebarHighlightLink
title={"All Collections"}
href={`/collections`}
icon={"bi-folder2"}
active={active === `/collections`}

36
components/SidebarHighlightLink.tsx
View File

@ -1,26 +1,38 @@
import Link from "next/link";
export default function SidebarHighlightLink({ title, href, icon, active }: {
title: string,
href: string,
icon: string,
active?: boolean
export default function SidebarHighlightLink({
title,
href,
icon,
active,
}: {
title: string;
href: string;
icon: string;
active?: boolean;
}) {
return (
<Link href={href}>
<div
className={`${
active || false ? "bg-primary/20" : "bg-white/5 hover:bg-neutral/20"
} duration-100 px-3 py-2 cursor-pointer gap-2 w-full rounded-lg capitalize`}
active || false
? "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"}>
<i className={`${icon} text-primary text-xl drop-shadow`}></i>
<div
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 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>
</Link>
)
);
}