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 { AppLink } from "../components/app-link"
import { MainNavigation } from "../components/main-navigation" import { MainNavigation } from "../components/main-navigation"
import { guideLinks } from "../data/guide-links" import { guideLinks } from "../data/guide-links"
import { useScrolled } from "../hooks/dom/use-scrolled"
import { Html } from "../html" import { Html } from "../html"
import { import {
docsProseClass, docsProseClass,
@@ -22,11 +21,11 @@ export default function DocsPage({
}) { }) {
return ( return (
<Html title={`${title} | Reacord`} description={description}> <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}> <div className={maxWidthContainer}>
<MainNavigation /> <MainNavigation />
</div> </div>
</HeaderPanel> </header>
<main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}> <main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
<nav className="w-48 sticky top-24 hidden md:block"> <nav className="w-48 sticky top-24 hidden md:block">
<h2 className="text-2xl">Guides</h2> <h2 className="text-2xl">Guides</h2>
@@ -46,14 +45,3 @@ export default function DocsPage({
</Html> </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>
}