shitty mobile mode

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;
+}