diff options
| -rw-r--r-- | components/navbar.tsx | 27 | ||||
| -rw-r--r-- | components/navbarItem.tsx | 14 | ||||
| -rw-r--r-- | pages/index.tsx | 10 | ||||
| -rw-r--r-- | styles/layout.css | 18 |
4 files changed, 41 insertions, 28 deletions
diff --git a/components/navbar.tsx b/components/navbar.tsx new file mode 100644 index 0000000..bdadfbc --- /dev/null +++ b/components/navbar.tsx @@ -0,0 +1,27 @@ +import { ReactNode } from 'react'; + +import HomeRoundedIcon from '@material-ui/icons/HomeRounded'; +import SearchRoundedIcon from '@material-ui/icons/SearchRounded'; + +function NavbarItem(props: { + icon?: ReactNode; + title: string; + href: string; + active: boolean; +}) { + return <a href={props.href} className={ "navbarItem" + (props.active ? " active" : "") }> + <div> + {props.icon} + <span>{props.title}</span> + </div> + </a> +} + +export default function Navbar(props: { + page?: string; +}) { + return <div> + <NavbarItem active={props.page == "home"} icon={<HomeRoundedIcon/>} title="Home" href="/"/> + <NavbarItem active={props.page == "search"} icon={<SearchRoundedIcon/>} title="Search for posts" href="/search"/> + </div> +} diff --git a/components/navbarItem.tsx b/components/navbarItem.tsx deleted file mode 100644 index b724444..0000000 --- a/components/navbarItem.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ReactNode } from 'react'; - -export default function NavbarItem(props: { - icon?: ReactNode; - title: string; - href: string; -}) { - return <a href={props.href} className="navbarItem"> - <div> - {props.icon} - <span>{props.title}</span> - </div> - </a> -} diff --git a/pages/index.tsx b/pages/index.tsx index 1d9f474..6450fd8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,8 +1,5 @@ import Seperator from '../components/articleSeperator'; -import NavbarItem from '../components/navbarItem'; - -import HomeRoundedIcon from '@material-ui/icons/HomeRounded'; -import SearchRoundedIcon from '@material-ui/icons/SearchRounded'; +import Navbar from '../components/navbar'; export default function Home() { return <div> @@ -12,10 +9,7 @@ export default function Home() { <p className="subtile">Loek heeft dit geschreven</p> </div> <div className="navAreaWrapper"> - <div className="sticky"> - <NavbarItem icon={<HomeRoundedIcon/>} title="Home" href="/"/> - <NavbarItem icon={<SearchRoundedIcon/>} title="Search for posts" href="/search"/> - </div> + <div className="sticky"><Navbar page="home"/></div> </div> <div className="contentWrapper"> <p> diff --git a/styles/layout.css b/styles/layout.css index e223b11..c739d13 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -1,12 +1,18 @@ +:root { + --nav-width: 200px; + --page-width: 700px; + --page-margins: 24px; +} + .centeredPage { - max-width: calc(700px + 24px + 200px); + max-width: calc(var(--nav-width) + var(--page-width) + var(--page-margins)); margin: 0 auto; margin-top: 96px; - padding: 0 24px; + padding: 0 var(--page-margins); display: grid; - gap: 24px; - grid-template-columns: 200px 1fr; + gap: var(--page-margins); + grid-template-columns: var(--nav-width) 1fr; grid-auto-rows: auto; } @@ -22,7 +28,7 @@ } .navAreaWrapper > .sticky { position: sticky; - top: 24px; + top: var(--page-margins); } .contentWrapper { @@ -31,7 +37,7 @@ } .contentWrapper > * { margin: 0; - margin-bottom: 24px; + margin-bottom: var(--page-margins); } .contentWrapper p { |