PulseApp/docs
PulseApp/docs
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Activity

fix sidebar padding, and add a skeleton for the on this page headers
All checks were successful
Deploy & Publish Image / deploy (ubuntu-latest, 2.44.0) (push) Successful in 3m50s
Details

Browse Source 
Took 10 minutes
This commit is contained in:
Braydon 2024-10-10 16:44:26 -04:00
parent a7a144dbd7
commit 1a1e854d73
4 changed files with 56 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/layout.tsx
View File

@ -41,9 +41,9 @@ const RootLayout = async ({
disableTransitionOnChange
>
<TooltipProvider delayDuration={100}>
<div className="px-3 md:px-7 max-w-screen-2xl min-h-screen mx-auto flex flex-col">
<div className="px-3 md:px-7 max-w-screen-2xl min-h-screen mx-auto flex flex-col transition-transform">
<Navbar pages={pages} />
<div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5 sm:gap-8">
<div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5 sm:gap-8 transition-transform transform-gpu">
<div className="relative hidden xs:flex">
<Sidebar pages={pages} />
</div>

69
src/components/on-this-page.tsx
View File

@ -9,6 +9,7 @@ import { Separator } from "@/components/ui/separator";
import { Button } from "@/components/ui/button";
import { AlignLeftIcon, ArrowUpFromDot, MoveRight } from "lucide-react";
import config from "@/config";
import { Skeleton } from "@/components/ui/skeleton";
type Header = {
id: string;
@ -81,7 +82,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
<motion.div
ref={ref}
className="sticky top-[7.5rem] w-44 max-h-[calc(100vh-3.5rem)] flex flex-col gap-2 text-sm select-none"
initial={{ opacity: 0 }}
initial={{ opacity: 1 }}
animate={{ opacity: inView ? 1 : 0 }}
transition={{ duration: 0.2 }}
>
@ -93,37 +94,43 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
{/* Headers */}
<ul className="relative">
{headers.map((header: Header) => (
<li
key={header.id}
className={cn(
"hover:opacity-80 transition-all transform-gpu relative",
activeHeader === header.id
? "font-semibold text-primary"
: "opacity-65"
)}
style={{ paddingLeft: `${(header.level - 1) * 16}px` }}
>
{/* Indentation */}
{header.level > 1 && (
<div
className="absolute left-0 top-0 bottom-0 border-l border-accent"
style={{
left: `${(header.level - 2) * 16 + 4}px`,
}}
/>
)}
{/* Header */}
<Link
href={`#${header.id}`}
draggable={false}
className="block py-1"
{headers.length === 0 ? (
<Skeleton className="w-full h-5 bg-accent rounded-lg" />
) : (
headers.map((header: Header) => (
<li
key={header.id}
className={cn(
"hover:opacity-80 transition-all transform-gpu relative",
activeHeader === header.id
? "font-semibold text-primary"
: "opacity-65"
)}
style={{
paddingLeft: `${(header.level - 1) * 16}px`,
}}
>
{truncateText(header.text, 20)}
</Link>
</li>
))}
{/* Indentation */}
{header.level > 1 && (
<div
className="absolute left-0 top-0 bottom-0 border-l border-accent"
style={{
left: `${(header.level - 2) * 16 + 4}px`,
}}
/>
)}
{/* Header */}
<Link
href={`#${header.id}`}
draggable={false}
className="block py-1"
>
{truncateText(header.text, 20)}
</Link>
</li>
))
)}
</ul>
{/* Footer */}

2
src/components/sidebar/sidebar-links.tsx
View File

@ -72,7 +72,7 @@ const CategoryItem = ({
>
<Button
className={cn(
`relative w-full px-1.5 h-8 justify-between hover:bg-accent/35`,
`relative w-full px-1.5 h-8 justify-between hover:bg-accent/35 hover:opacity-90`,
node.isFolder
? "mb-0.5 text-sm font-semibold"
: "lg:text-base",

15
src/components/ui/skeleton.tsx Normal file
View File

@ -0,0 +1,15 @@
import { cn } from "@/lib/utils";
function Skeleton({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn("animate-pulse rounded-md bg-primary/10", className)}
{...props}
/>
);
}
export { Skeleton };