Skip to content

Commit

Permalink
feat: add back to top button when sidebar overflows
Browse files Browse the repository at this point in the history
  • Loading branch information
@karrui
karrui committed Aug 1, 2024
1 parent a704ea4 commit d21d498
Show file tree
Hide file tree
Showing 2 changed files with 209 additions and 2 deletions.
198 changes: 198 additions & 0 deletions packages/components/src/templates/next/layouts/Content/Content.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,204 @@ export const Default: Story = {
},
],
},

{
title: "Irrationality2",
permalink: "/parent/rationality2",
lastModified: "",
layout: "content",
summary: "",
children: [
{
title: "For Individuals",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
{
title: "Steven Pinker's Rationality",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},
{
title: "Sibling",
permalink: "/parent/sibling",
lastModified: "",
layout: "content",
summary: "",
children: [
{
title: "Child that should not appear",
permalink: "/parent/sibling/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},
{
title: "Irrationality3",
permalink: "/parent/rationality3",
lastModified: "",
layout: "content",
summary: "",
children: [
{
title: "For Individuals",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
{
title: "Steven Pinker's Rationality",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},
{
title: "Sibling",
permalink: "/parent/sibling",
lastModified: "",
layout: "content",
summary: "",
children: [
{
title: "Child that should not appear",
permalink: "/parent/sibling/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},

{
title: "Irrationality4",
permalink: "/parent/rationality4",
lastModified: "",
layout: "content",
summary: "",
children: [
{
title: "For Individuals",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
{
title: "Steven Pinker's Rationality",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},
{
title: "Sibling",
permalink: "/parent/sibling",
lastModified: "",
layout: "content",
summary: "",
children: [
{
title: "Child that should not appear",
permalink: "/parent/sibling/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},
{
title: "Irrationality5",
permalink: "/parent/rationality5",
lastModified: "",
layout: "content",
summary: "",
children: [
{
title: "For Individuals",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
{
title: "Steven Pinker's Rationality",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},
{
title: "Sibling",
permalink: "/parent/sibling",
lastModified: "",
layout: "content",
summary: "",
children: [
{
title: "Child that should not appear",
permalink: "/parent/sibling/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},

{
title: "Irrationality6",
permalink: "/parent/rationality6",
lastModified: "",
layout: "content",
summary: "",
children: [
{
title: "For Individuals",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
{
title: "Steven Pinker's Rationality",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},
{
title: "Sibling",
permalink: "/parent/sibling",
lastModified: "",
layout: "content",
summary: "",
children: [
{
title: "Child that should not appear",
permalink: "/parent/sibling/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},
],
},
{
Expand Down
13 changes: 11 additions & 2 deletions packages/components/src/templates/next/layouts/Content/Content.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { BiUpArrowAlt } from "react-icons/bi"
import { tv } from "tailwind-variants"

import type { ContentPageSchemaType, IsomerSitemap } from "~/engine"
Expand Down Expand Up @@ -134,7 +135,7 @@ const createContentLayoutStyles = tv({
slots: {
container:
"mx-auto grid max-w-screen-xl grid-cols-12 px-6 py-12 md:px-10 md:py-16 lg:gap-6 xl:gap-10",
siderailContainer: "col-span-3 hidden lg:block",
siderailContainer: "relative col-span-3 hidden lg:block",
content: "col-span-12 flex flex-col gap-16 lg:col-span-9 lg:ml-24",
},
})
Expand All @@ -145,7 +146,7 @@ const ContentLayout = ({
site,
page,
content,
LinkComponent,
LinkComponent = "a",
ScriptComponent,
}: ContentPageSchemaType) => {
const sideRail = getSiderailFromSiteMap(
Expand Down Expand Up @@ -177,6 +178,14 @@ const ContentLayout = ({
{sideRail && (
<div className={compoundStyles.siderailContainer()}>
<Siderail {...sideRail} LinkComponent={LinkComponent} />
<LinkComponent
href="#"
// TODO: Replace LinkComponent with a custom link component with all the styles
className="prose-body-base sticky top-8 mt-8 flex items-center text-link underline-offset-4 hover:underline"
>
<BiUpArrowAlt aria-hidden className="h-6 w-6" />
Back to top
</LinkComponent>
</div>
)}
<div className={compoundStyles.content()}>
Expand Down

0 comments on commit d21d498

Please sign in to comment.