Skip to content

Commit

Permalink
docs: make sidenav sticky [DREL-329] (#8310)
Browse files Browse the repository at this point in the history 
* docs: make sidenav sticky

* left nav y scroll
  • Loading branch information
@yuhan
yuhan committed Jun 10, 2022
1 parent bca8b6a commit 3a1d95b
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 143 deletions.
6 changes: 3 additions & 3 deletions docs/next/components/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ const SidebarContents = () => {
<>
{/* Sidebar component, swap this element with another sidebar if you like */}
{/* Search Bar*/}
<div className="h-0 flex-1 flex flex-col overflow-y-auto ">
<div className="flex-1 flex flex-col">
<div className="px-3 mt-5">
<div className="block w-full pl-4 border-gray-300 rounded-full border bg-white">
<Search />
Expand All @@ -222,7 +222,7 @@ const SidebarContents = () => {
{/* End Search Bar */}

{/* Navigation */}
<nav className="px-3 mt-6">
<nav className="px-3 mt-6 overflow-y-scroll max-h-(screen-60)">
<TopLevelNavigation />
</nav>
</div>
Expand Down Expand Up @@ -304,7 +304,7 @@ const Sidebar = ({ isMobileDocsMenuOpen, closeMobileDocsMenu }) => {
</Transition>

{/* Static sidebar for desktop */}
<div className="hidden lg:block lg:flex-shrink-0">
<div className="hidden lg:block fixed left-8 z-50 lg:flex-shrink-0">
<div className="h-full flex flex-col w-80">
<SidebarContents />
</div>
Expand Down
228 changes: 89 additions & 139 deletions docs/next/components/mdx/MDXRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,83 @@ const BreadcrumbNav = ({ asPath }) => {
);
};

const RightSidebar = ({
editMode,
navigationItems,
githubLink,
toggleFeedback,
}) => {
return (
!editMode && (
<aside className="hidden relative xl:block flex-none w-80 flex shrink-0 border-l border-gray-200">
{/* Start secondary column (hidden on smaller screens) */}
<div className="flex flex-col justify-between sticky top-24 py-6 px-4">
<div
className="mb-8 px-4 pt-2 pb-10 relative overflow-y-scroll border-b border-gray-200"
style={{ maxHeight: "calc(100vh - 300px)" }}
>
<div className="font-semibold text-gable-green">On This Page</div>
<div className="mt-6">
{navigationItems && <SidebarNavigation items={navigationItems} />}
</div>
</div>
<div className="py-2 px-4 flex items-center group">
<svg
className="h-4 w-4 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100 transition transform group-hover:scale-105 group-hover:rotate-6"
role="img"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>
<a
className="text-sm ml-2 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100"
href={githubLink}
>
Edit Page on GitHub
</a>
</div>
<div className="py-2 px-4 flex items-center group">
<svg
className="h-4 w-4 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100 transition transform group-hover:scale-105 group-hover:rotate-6"
role="img"
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
strokeWidth="2"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
/>
</svg>
<button
className="text-sm ml-2 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100"
onClick={toggleFeedback}
>
Share Feedback
</button>
</div>
<div className="py-2 px-4 flex items-center group">
<GitHubButton
href="https://github.com/dagster-io/dagster"
data-icon="octicon-star"
data-show-count="true"
aria-label="Star dagster-io/dagster on GitHub"
>
Star
</GitHubButton>
</div>
</div>
{/* End secondary column */}
</aside>
)
);
};

export const VersionedContentLayout = ({ children, asPath = null }) => {
return (
<div
Expand Down Expand Up @@ -232,76 +309,12 @@ export function UnversionedMDXRenderer({
</div>
</div>

{!editMode && (
<aside className="hidden relative xl:block flex-none w-80 flex shrink-0 border-l border-gray-200">
{/* Start secondary column (hidden on smaller screens) */}
<div className="flex flex-col justify-between sticky top-24 py-6 px-4">
<div
className="mb-8 px-4 pt-2 pb-10 relative overflow-y-scroll border-b border-gray-200"
style={{ maxHeight: "calc(100vh - 300px)" }}
>
<div className="font-semibold text-gable-green">On This Page</div>
<div className="mt-6">
{navigationItems && (
<SidebarNavigation items={navigationItems} />
)}
</div>
</div>
<div className="py-2 px-4 flex items-center group">
<svg
className="h-4 w-4 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100 transition transform group-hover:scale-105 group-hover:rotate-6"
role="img"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>
<a
className="text-sm ml-2 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100"
href={githubLink}
>
Edit Page on GitHub
</a>
</div>

<div className="py-2 px-4 flex items-center group">
<svg
className="h-4 w-4 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100 transition transform group-hover:scale-105 group-hover:rotate-6"
role="img"
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
strokeWidth="2"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
/>
</svg>
<button
className="text-sm ml-2 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100"
onClick={toggleFeedback}
>
Share Feedback
</button>
</div>
<div className="py-2 px-4 flex items-center group">
<GitHubButton
href="https://github.com/dagster-io/dagster"
data-icon="octicon-star"
data-show-count="true"
aria-label="Star dagster-io/dagster on GitHub"
>
Star
</GitHubButton>
</div>
</div>
{/* End secondary column */}
</aside>
)}
<RightSidebar
editMode={editMode}
navigationItems={navigationItems}
githubLink={githubLink}
toggleFeedback={toggleFeedback}
/>
</>
);
}
Expand Down Expand Up @@ -351,75 +364,12 @@ function VersionedMDXRenderer({
</div>
</VersionedContentLayout>

{!editMode && (
<aside className="hidden relative xl:block flex-none w-80 flex shrink-0 border-l border-gray-200">
{/* Start secondary column (hidden on smaller screens) */}
<div className="flex flex-col justify-between sticky top-24 py-6 px-4">
<div
className="mb-8 px-4 pt-2 pb-10 relative overflow-y-scroll border-b border-gray-200"
style={{ maxHeight: "calc(100vh - 300px)" }}
>
<div className="font-semibold text-gable-green">On This Page</div>
<div className="mt-6">
{navigationItems && (
<SidebarNavigation items={navigationItems} />
)}
</div>
</div>
<div className="py-2 px-4 flex items-center group">
<svg
className="h-4 w-4 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100 transition transform group-hover:scale-105 group-hover:rotate-6"
role="img"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>
<a
className="text-sm ml-2 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100"
href={githubLink}
>
Edit Page on GitHub
</a>
</div>
<div className="py-2 px-4 flex items-center group">
<svg
className="h-4 w-4 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100 transition transform group-hover:scale-105 group-hover:rotate-6"
role="img"
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
strokeWidth="2"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
/>
</svg>
<button
className="text-sm ml-2 text-gray-500 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100"
onClick={toggleFeedback}
>
Share Feedback
</button>
</div>
<div className="py-2 px-4 flex items-center group">
<GitHubButton
href="https://github.com/dagster-io/dagster"
data-icon="octicon-star"
data-show-count="true"
aria-label="Star dagster-io/dagster on GitHub"
>
Star
</GitHubButton>
</div>
</div>
{/* End secondary column */}
</aside>
)}
<RightSidebar
editMode={editMode}
navigationItems={navigationItems}
githubLink={githubLink}
toggleFeedback={toggleFeedback}
/>
</>
);
}
Expand Down
2 changes: 1 addition & 1 deletion docs/next/layouts/MainLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const Layout = ({ children }) => {
isMobileDocsMenuOpen={isMobileDocsMenuOpen}
closeMobileDocsMenu={closeMobileDocsMenu}
/>
{children}
<div className="lg:pl-80 flex w-full">{children}</div>
</div>
</div>
</div>
Expand Down

1 comment on commit 3a1d95b

@vercel
Copy link

@vercel vercel bot commented on 3a1d95b Jun 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

dagster – ./docs/next

dagster.vercel.app
new-docs.dagster.io
dagster-git-master-elementl.vercel.app
dagster-elementl.vercel.app
docs.dagster.io

Please sign in to comment.