Viewing: raw.githubusercontent.com

[ Web Proxy ]

Viewing: https://raw.githubusercontent.com/mcjava-wiki/mcjava-wiki/main/src/components/DocLayout.tsx

import * as React from 'react' import { graphql, useStaticQuery } from 'gatsby' import styled, { x, css, up, down, th, useUp } from '@xstyled/styled-components' import { useDialogState, Dialog, DialogDisclosure } from 'ariakit/dialog' import { Portal } from 'ariakit/portal' import { FaBars } from 'react-icons/fa' import { RiEditCircleFill, RiGithubFill } from 'react-icons/ri' import { ScreenContainer } from './ScreenContainer' import { SideNav, useSideNavState, useSideNavPrevNext } from './SideNav' import { PageLayout } from './PageLayout' import { SiblingNav, SiblingNavLink } from './SiblingNav' import { Article } from './Article' import { TableOfContents } from './TableOfContents' import { Contributors } from './Contributors' import { DocSearch } from './DocSearch' const SidebarDialog = styled.div` background-color: background-light-a50; backdrop-filter: blur(3px); position: fixed; top: 50; right: 0; bottom: 0; left: 0; z-index: 20; overflow: auto; transition: base; opacity: 0; transition: opacity 250ms ease-in-out, transform 250ms ease-in-out; transform: translate3d(0, 10vh, 0); &[data-enter] { opacity: 1; transform: translate3d(0, 0, 0); } &:focus { outline: none; } ` const Container = styled.div` z-index: 0; position: relative; ${up( 'md', css` display: grid; grid-template-columns: 288px minmax(0, 1fr); grid-gap: ${th.space(5)}; .sidebar-container { display: none; } `, )} ${up( 'xl', css` grid-template-columns: 288px minmax(0, 1fr) 288px; .sidebar-container { display: none; } `, )} ` const TocContainer = styled.div` ${down( 'xl', css` display: none; `, )} ` const SidebarSticky = styled.aside` position: sticky; top: ${th.px(50)}; padding: 4 0; overflow-y: auto; height: calc(100vh - 50px); width: 288px; ${down( 'md', css` display: none; `, )} ` const MenuButton = styled.button` appearance: none; border: 0; border-radius: 20%; width: 60; height: 60; position: fixed; right: ${th.size(8)}; top: ${th.size(55)}; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; color: background; background-color: on-background; transition: base; transition-property: color; &:focus { color: background; } > svg { width: 30; height: 30; transition: transform 200ms ease-in-out; } &[aria-expanded='true'] { > svg:last-child { transform: rotate(90deg); } } ` const DocSearchQuery = graphql` query DocSearch { site { siteMetadata { docSearch { apiKey indexName appId } } } } ` function MobileSidebar({ children }: { children: React.ReactNode }) { const dialog = useDialogState({ animated: true }) const data: Queries.DocSearchQuery = useStaticQuery(DocSearchQuery) if (!data.site || !data.site.siteMetadata) return null; const docSearch = data.site.siteMetadata.docSearch; if (!docSearch) return null; return (

{children} ) } function PrevNextLinks({ editLink, ...props }: { navGroups: any; } & { [x: string]: any; }) { const { prev, next } = useSideNavPrevNext(props) if (!prev && !next) return null return ( {prev && ( {prev.fields.title} )}

{editLink && ( )}

{next && ( {next.fields.title} )} ) } export function DocLayout( { children, tableOfContents, editLink, contributors, title, ...props }: { children: React.ReactNode, tableOfContents: any, editLink: string, contributors: any, title:string, props?: any } ) { const upMd = useUp('md') const sideNav: any = useSideNavState() return (

{!upMd && ( )}

{children} ) }

Web Proxy Viewer | New URL | Original Page