diff options
| -rw-r--r-- | components/navbar.tsx | 16 | ||||
| -rw-r--r-- | pages/index.tsx | 3 | ||||
| -rw-r--r-- | pages/search.tsx | 3 | ||||
| -rw-r--r-- | styles/layout.css | 62 | ||||
| -rw-r--r-- | styles/navbar.css | 44 |
5 files changed, 124 insertions, 4 deletions
diff --git a/components/navbar.tsx b/components/navbar.tsx index 35949f4..b5549c0 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -2,6 +2,7 @@ import { CSSProperties, ReactNode } from 'react'; import HomeRoundedIcon from '@material-ui/icons/HomeRounded'; import SearchRoundedIcon from '@material-ui/icons/SearchRounded'; +import MenuIcon from '@material-ui/icons/Menu'; export function NavbarItem(props: { icon?: ReactNode; @@ -30,7 +31,7 @@ export function NavbarItem(props: { export default function Navbar(props: { page?: string; }) { - return <div style={{ marginBottom: 24 }}> + return <div className="globalLinks" style={{ marginBottom: 24 }}> <NavbarItem active={props.page == 'home'} icon={<HomeRoundedIcon />} @@ -47,3 +48,16 @@ export default function Navbar(props: { /> </div>; } + +export function MobileNavbar() { + return <div className="mobileNav"> + <a className="home button small" href="/"><HomeRoundedIcon /></a> + <a className="search button small" href="/search"><SearchRoundedIcon/></a> + <div className="mainButton button" onClick={() => { + document.getElementsByClassName("mobileNav")[0].classList.toggle("open"); + document.getElementsByClassName("navAreaWrapper")[0].classList.toggle("navVisible"); + }}> + <MenuIcon style={{ "fill": "var(--oxford-blue)" }} /> + </div> + </div>; +} diff --git a/pages/index.tsx b/pages/index.tsx index ab0f6ff..7f4c5fe 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,7 @@ import Button from '../components/button'; import PostCard from '../components/card'; import Chapters, { chapter } from '../components/chapters'; -import Navbar, { NavbarItem } from '../components/navbar'; +import Navbar, { NavbarItem, MobileNavbar } from '../components/navbar'; import Seperator from '../components/seperator'; import { ArticleMeta, getStaticProps as getBlogPage, RenderedArticle } from './post/[id]'; import { PostsInfo } from './search'; @@ -51,6 +51,7 @@ export default function Home(props: { /> </div> </div> + <MobileNavbar/> <div className='contentWrapper'> {props.posts.map((post, index) => { return <> diff --git a/pages/search.tsx b/pages/search.tsx index 8daff50..b95d70e 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -1,7 +1,7 @@ import Fuse from 'fuse.js'; import { useEffect, useState } from 'react'; -import Navbar from '../components/navbar'; +import Navbar, { MobileNavbar } from '../components/navbar'; import Tags from '../components/tag'; import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined'; @@ -149,6 +149,7 @@ export default function SearchPage() { <Navbar page='search' /> </div> </div> + <MobileNavbar/> <div className='contentWrapper'> <SearchBar searchFunction={() => { diff --git a/styles/layout.css b/styles/layout.css index 6715681..b4e2a76 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -20,7 +20,10 @@ grid-column: 2; grid-row: 1; } -.titleWrapper > * { margin: 0; } +.titleWrapper > * { + margin: 0; + word-break: break-word; +} .navAreaWrapper { grid-column: 1; @@ -64,3 +67,60 @@ grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); } +.mobileNav { + display: none; +} + +@media screen and (max-device-width: 550px) { + .navAreaWrapper { + grid-column: none; + grid-row: none; + } + + .centeredPage { + grid-template-columns: 0 1fr; + gap: var(--page-margins) 0; + padding: 0 12px; + } + + .navAreaWrapper { + position: fixed; + inset: 0px 0px 0px 0px; + + z-index: 2; + + transition-property: opacity; + transition-duration: .1s; + + opacity: 0; + pointer-events: none; + backdrop-filter: blur(50px); + background-color: #161B3300; + } + + .navAreaWrapper.navVisible { + pointer-events: initial; + opacity: 1; + } + + .navAreaWrapper .globalLinks { + display: none; + } + + .navAreaWrapper > .sticky { + position: absolute; + inset: 0px 0px 0px 0px; + + padding: 24px; + overflow-y: scroll; + } + + .mobileNav { + display: inline-block; + position: fixed; + bottom: 24px; + right: 24px; + z-index: 5; + } +} + diff --git a/styles/navbar.css b/styles/navbar.css index 607c3d7..c73c829 100644 --- a/styles/navbar.css +++ b/styles/navbar.css @@ -101,3 +101,47 @@ color: var(--oxford-blue) } } + +.mobileNav { + width: 48px; + text-align: center; + line-height: 0; +} + +.mobileNav .button:last-child { + margin-bottom: 0; +} + +.mobileNav .button { + padding: 12px; + background-color: var(--fire-opal); + display: inline-block !important; + min-width: 0; + border-radius: 24px; + margin: 0; + box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 25%); + + width: 24px; + height: 24px; + position: relative; +} + +.mobileNav .button > svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.mobileNav .button.small { + padding: 6px; + background-color: var(--purple-navy); + margin-bottom: 12px; + + opacity: 0; + transition: opacity .3s; +} + +.mobileNav.open .button.small { + opacity: 1; +} |