sidebar: fixed link active state, /docs link

This commit is contained in:
marshennikovaolga
2024-09-10 11:35:02 +03:00
parent 0b1ea7bc0d
commit 27763ae230
3 changed files with 26 additions and 10 deletions

BIN
bun.lockb

Binary file not shown.

View File

@@ -1,6 +1,6 @@
import React from "react" import React from "react"
import Link from "next/link" import Link from "next/link"
import { usePathname } from "next/navigation" import { usePathname, useRouter } from "next/navigation"
import { useAccount } from "@/lib/providers/jazz-provider" import { useAccount } from "@/lib/providers/jazz-provider"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { PersonalLinkLists } from "@/lib/schema/personal-link" import { PersonalLinkLists } from "@/lib/schema/personal-link"
@@ -32,19 +32,24 @@ interface LinkSectionHeaderProps {
isActive: boolean isActive: boolean
} }
const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount, isActive }) => { const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount }) => {
const pathname = usePathname()
const [state] = useQueryState("state", parseAsStringLiteral(LEARNING_STATES.map(ls => ls.value)))
const isLinksActive = pathname.startsWith("/links") && !state
return ( return (
<div <div className="flex gap-px rounded-md">
className={cn(
"flex min-h-7 items-center gap-px rounded-md",
isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
)}
>
<Link <Link
href="/links" href="/links"
className="flex flex-1 items-center justify-start rounded-md px-2 py-1 focus-visible:outline-none focus-visible:ring-0" className={cn(
"flex size-6 flex-1 items-center justify-start rounded-md px-2",
"focus-visible:outline-none focus-visible:ring-0",
isLinksActive
? "bg-accent text-accent-foreground items-center justify-center py-3"
: "hover:bg-accent hover:text-accent-foreground"
)}
> >
<p className="text-xs"> <p className="flex w-full items-center text-xs font-medium">
Links Links
{linkCount > 0 && <span className="text-muted-foreground ml-1">{linkCount}</span>} {linkCount > 0 && <span className="text-muted-foreground ml-1">{linkCount}</span>}
</p> </p>

View File

@@ -75,6 +75,17 @@ export const ProfileSection: React.FC = () => {
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="https://docs.learn-anything.xyz/">
<div className="relative flex flex-1 items-center gap-2">
<LaIcon name="Sticker" />
<span className="line-clamp-1 flex-1">Docs</span>
</div>
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => signOut()}> <DropdownMenuItem onClick={() => signOut()}>
<div className="relative flex flex-1 items-center gap-2"> <div className="relative flex flex-1 items-center gap-2">
<LaIcon name="LogOut" /> <LaIcon name="LogOut" />