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

Merge pull request #350 from YeeJiaWei/sidebar-highlight-link 

Sidebar highlight link
This commit is contained in:
Daniel 2023-12-18 08:10:44 +03:30 committed by GitHub
parent 1677e132f3 f961ec0109
commit a6e0af6b6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
components/Sidebar.tsx
View File

@ -4,6 +4,7 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
import SidebarHighlightLink from "@/components/SidebarHighlightLink";
export default function Sidebar({ className }: { className?: string }) { export default function Sidebar({ className }: { className?: string }) {
const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => { const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
@ -47,54 +48,27 @@ export default function Sidebar({ className }: { className?: string }) {
className || "" className || ""
}`} }`}
> >
<div className="flex flex-col gap-1 mt-2"> <div className="grid grid-cols-2 gap-1 mt-2">
<Link href={`/dashboard`}> <SidebarHighlightLink title={"Dashboard"}
<div href={`/dashboard`}
className={`${ icon={"bi-house"}
active === `/dashboard` ? "bg-primary/20" : "hover:bg-neutral/20" active={active === `/dashboard`}
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`} />
> <SidebarHighlightLink title={"Pinned"}
<i className="bi-house text-primary text-2xl drop-shadow"></i> href={`/links/pinned`}
<p className="truncate w-full">Dashboard</p> icon={"bi-pin-angle"}
</div> active={active === `/links/pinned`}
</Link> />
<SidebarHighlightLink title={"All Links"}
<Link href={`/links`}> href={`/links`}
<div icon={"bi-link-45deg"}
className={`${ active={active === `/links`}
active === `/links` ? "bg-primary/20" : "hover:bg-neutral/20" />
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`} <SidebarHighlightLink title={"All Collections"}
> href={`/collections`}
<i className="bi-link-45deg text-primary text-2xl drop-shadow"></i> icon={"bi-folder2"}
<p className="truncate w-full">All Links</p> active={active === `/collections`}
</div> />
</Link>
<Link href={`/collections`}>
<div
className={`${
active === `/collections`
? "bg-primary/20"
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
>
<i className="bi-folder text-primary text-2xl drop-shadow"></i>
<p className="truncate w-full">All Collections</p>
</div>
</Link>
<Link href={`/links/pinned`}>
<div
className={`${
active === `/links/pinned`
? "bg-primary/20"
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
>
<i className="bi-pin-angle text-primary text-2xl drop-shadow"></i>
<p className="truncate w-full">Pinned Links</p>
</div>
</Link>
</div> </div>
<Disclosure defaultOpen={collectionDisclosure}> <Disclosure defaultOpen={collectionDisclosure}>

26
components/SidebarHighlightLink.tsx Normal file
View File

@ -0,0 +1,26 @@
import Link from "next/link";
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`}
>
<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>
<div className={"mt-1"}>
<p className="truncate w-full text-xs sm:text-sm">{title}</p>
</div>
</div>
</Link>
)
}