jeffemmett
/
web3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[components/sidebar][f]: layout prep for sidebar

This commit is contained in:
olayway 2022-05-23 18:02:06 +02:00
parent f440456dd0
commit 6b8a0f2699
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/components/Layout.js
View File

@ -1,7 +1,10 @@
import Head from 'next/head' import Head from 'next/head'
import Nav from './Nav'
import siteConfig from '../config/siteConfig' import siteConfig from '../config/siteConfig'
import navLinks from '../config/navLinks.js' import navLinks from '../config/navLinks'
import Nav from './Nav'
import Sidebar from './Sidebar'
export default function Layout({ children }) { export default function Layout({ children }) {
return ( return (
@ -14,7 +17,8 @@ export default function Layout({ children }) {
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
</Head> </Head>
<Nav /> <Nav />
<main> <main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<Sidebar />
{children} {children}
</main> </main>
<footer className="w-full h-24 mt-16"> <footer className="w-full h-24 mt-16">
@ -53,4 +57,4 @@ export default function Layout({ children }) {
</footer> </footer>
</> </>
) )
} }

17
site/components/Sidebar.js Normal file
View File

@ -0,0 +1,17 @@
export default function Sidebar (props) {
// max-w-7xl = max-w-80rem
// w-60 = 15rem
return (
<div className="hidden lg:block w-[16rem] fixed top-16 left-[max(0px,calc(50%-40rem))] bottom-0 right-auto px-2 sm:px-6 lg:px-8 overflow-y-auto">
{/* TODO LHS TOC */}
<nav>
<ul>
<li>Heading 1</li>
<li>Heading 2</li>
<li>Heading 3</li>
<li>Heading 4</li>
<li>Heading 5</li>
</ul>
</nav>
</div>)
}