better responsiveness
All checks were successful
Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 1m1s

Took 11 minutes
This commit is contained in:
Braydon 2024-10-07 20:58:31 -04:00
parent dc89db4eed
commit 1717c0859d
3 changed files with 11 additions and 7 deletions

View File

@ -46,7 +46,7 @@ const DocsFooter = ({
pages[current]?.published pages[current]?.published
).toLocaleString(DateTime.DATETIME_MED)} ).toLocaleString(DateTime.DATETIME_MED)}
> >
<span className="text-sm opacity-75"> <span className="text-xs sm:text-sm opacity-75 transition-all transform-gpu">
Published {publicationDate} Published {publicationDate}
</span> </span>
</SimpleTooltip> </SimpleTooltip>
@ -56,7 +56,7 @@ const DocsFooter = ({
{previous || next ? ( {previous || next ? (
<Separator className="my-4 bg-separator-gradient" /> <Separator className="my-4 bg-separator-gradient" />
) : undefined} ) : undefined}
<div className="flex justify-between"> <div className="flex justify-between text-xs sm:text-base">
{/* Previous */} {/* Previous */}
{previous && ( {previous && (
<Link <Link

View File

@ -20,11 +20,11 @@ const SidebarLinks = ({
}): ReactElement => { }): ReactElement => {
const tree = useMemo(() => buildTree(pages), [pages]); const tree = useMemo(() => buildTree(pages), [pages]);
return ( return (
<> <div className="flex flex-col gap-1">
{Object.values(tree).map((node: TreeNode) => ( {Object.values(tree).map((node: TreeNode) => (
<CategoryItem key={node.slug} node={node} /> <CategoryItem key={node.slug} node={node} />
))} ))}
</> </div>
); );
}; };
@ -51,7 +51,7 @@ const CategoryItem = ({
const hasChildren = Object.keys(node.children).length > 0; const hasChildren = Object.keys(node.children).length > 0;
return ( return (
<div className={cn(`relative select-none`, depth > 0 && "ml-2.5")}> <div className={cn(`relative select-none`, depth > 0 && "ml-4")}>
{/* Indentation */} {/* Indentation */}
{depth > 0 && ( {depth > 0 && (
<div <div
@ -72,7 +72,7 @@ const CategoryItem = ({
> >
<Button <Button
className={cn( className={cn(
`relative w-full px-1.5 h-8 text-base justify-between hover:bg-accent/20`, `relative w-full px-1.5 h-8 lg:text-base justify-between hover:bg-accent/20`,
depth > 0 && "pl-4", depth > 0 && "pl-4",
active && active &&
"text-primary/95 font-bold hover:text-primary" "text-primary/95 font-bold hover:text-primary"

View File

@ -1,5 +1,9 @@
import { ReactElement, ReactNode } from "react"; import { ReactElement, ReactNode } from "react";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { SIDE_OPTIONS } from "@radix-ui/react-popper"; import { SIDE_OPTIONS } from "@radix-ui/react-popper";
/** /**