docs/src/components/Sidebar.tsx at patch-1 · hmmhmmhm/docs

Repository navigation

History

import { useRouter } from "next/router";

import React from "react";

import tw from "twin.macro";

import { sidebarContent } from "../data/sidebar";

import { Link } from "./Link";

import { Logo } from "./Logo";

import { ScrollArea } from "./ScrollArea";

import { Search } from "./Search";

import { ThemeSwitcher } from "./ThemeSwitcher";

export const Sidebar: React.FC = ({ ...props }) => {

return (

<div

css={[

tw`hidden`,

tw`md:h-screen md:sticky md:top-0 md:overflow-hidden md:block md:min-w-sidebar`,

tw`md:border-r md:border-gray-200`,

]}

className="sidebar"

{...props}

<Logo tw="w-8 h-8 mr-4" /> <span tw="font-bold">Railway</span>

</div>

</Link>

</div>

</div>

</ScrollArea>

</div>

);

};

export const MobileSidebar: React.FC<{ isOpen: boolean }> = ({ isOpen }) => {

return (

</div>

);

};

const SidebarContent: React.FC = () => {

const { pathname } = useRouter();

return (

{sidebarContent.map((section, i) => (

<React.Fragment key={i}>

{section.title != null && (

{section.title}

</h5>

)}

{section.pages.map(page => (

<Link

href={page.slug}

css={[

tw`text-gray-700 text-sm`,

tw`block px-4 py-2`,

tw`hover:bg-gray-100 hover:text-foreground`,

tw`focus:outline-none focus:bg-pink-100`,

pathname === page.slug &&

tw`bg-pink-100 text-pink-900 hover:bg-pink-100 border-r-2 border-pink-500`,

]}

{page.title}

</Link>

</li>

))}

</ul>

</React.Fragment>

))}

</>

);

};

FilesExpand file tree

Sidebar.tsx

Latest commit

History

Sidebar.tsx

File metadata and controls