kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

always render pretty header

Browse Source
This commit is contained in:
MapleLeaf
2022-01-03 03:34:59 -06:00
committed by Darius
parent 80953c6ca9
commit 1f9adc5593
1 changed files with 2 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/docs-new/src/pages/docs.tsx
View File

@@ -3,7 +3,6 @@ import React from "react"
import { AppLink } from "../components/app-link"
import { MainNavigation } from "../components/main-navigation"
import { guideLinks } from "../data/guide-links"
import { useScrolled } from "../hooks/dom/use-scrolled"
import { Html } from "../html"
import {
docsProseClass,
@@ -22,11 +21,11 @@ export default function DocsPage({
}) {
return (
<Html title={`${title} | Reacord`} description={description}>
<HeaderPanel>
<header className="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex">
<div className={maxWidthContainer}>
<MainNavigation />
</div>
</HeaderPanel>
</header>
<main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
<nav className="w-48 sticky top-24 hidden md:block">
<h2 className="text-2xl">Guides</h2>
@@ -46,14 +45,3 @@ export default function DocsPage({
</Html>
)
}
function HeaderPanel({ children }: { children: React.ReactNode }) {
const isScrolled = useScrolled()
const className = clsx(
isScrolled ? "bg-slate-700/30" : "bg-slate-800",
"shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
)
return <header className={className}>{children}</header>
}