mobile beginnings

4 files changed, 134 insertions, 1 deletions

diff --git a/components/keybindselector.tsx b/components/keybindselector.tsx
index 26eb222..e9b905f 100644
--- a/components/keybindselector.tsx
+++ b/components/keybindselector.tsx
@@ -38,7 +38,7 @@ export default function KeybindSelector(props: {
 				<Keybind
 					keyName={s}
 					onClick={() => {
-						props.onChange && props.onChange(props.value.filter(v => v != s));
+						props.onChange?.(props.value.filter(v => v != s));
 					}}
 				/>
 			)}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7e34a6d..a42ad6c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,6 +7,7 @@ import '../styles/editor.css';
 import '../styles/globals.css';
 import '../styles/keybindselector.css';
 import '../styles/keyframes.css';
+import '../styles/mobile.css';
 import '../styles/paper.css';
 import '../styles/presentation.css';
 import '../styles/selection.css';
diff --git a/pages/mobile/index.tsx b/pages/mobile/index.tsx
new file mode 100644
index 0000000..5e3a7cf
--- /dev/null
+++ b/pages/mobile/index.tsx
@@ -0,0 +1,74 @@
+import { ReactNode, useState } from 'react';
+
+import AppBar from '@material-ui/core/AppBar';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
+import Toolbar from '@material-ui/core/Toolbar';
+
+import AccountCircleRoundedIcon from '@material-ui/icons/AccountCircleRounded';
+import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
+import MenuRoundedIcon from '@material-ui/icons/MenuRounded';
+import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
+
+export type pages = 'home' | 'account' | 'settings';
+export function MobileWrapper(props: {
+	children?: ReactNode;
+	page: pages;
+	nobar?: boolean;
+}) {
+	var [drawerOpen, setDrawerOpen] = useState(false);
+
+	return <div className='mobile'>
+		{!props.nobar && <AppBar position='static'>
+			<Toolbar>
+				<IconButton edge='start' color='inherit' aria-label='menu' onClick={() => setDrawerOpen(true)}>
+					<MenuRoundedIcon />
+				</IconButton>
+				<h3>Pressure</h3>
+			</Toolbar>
+		</AppBar>}
+		<SwipeableDrawer
+			anchor='left'
+			open={drawerOpen}
+			onOpen={() => setDrawerOpen(true)}
+			onClose={() => setDrawerOpen(false)}
+		>
+			<List>
+				<div className='listWrapper'>
+					<ListItem>
+						<ListItemText>
+							<h3>Pressure</h3>
+						</ListItemText>
+					</ListItem>
+					<Divider />
+					<ListItem button selected={props.page == 'home'}>
+						<ListItemIcon children={<HomeRoundedIcon />} />
+						<ListItemText primary='Home' />
+					</ListItem>
+					<div className='b0 posabs dispbl fullwidth'>
+						<ListItem button selected={props.page == 'account'}>
+							<ListItemIcon children={<AccountCircleRoundedIcon />} />
+							<ListItemText primary='Account' />
+						</ListItem>
+						<ListItem button selected={props.page == 'settings'}>
+							<ListItemIcon children={<SettingsRoundedIcon />} />
+							<ListItemText primary='Settings' />
+						</ListItem>
+					</div>
+				</div>
+			</List>
+		</SwipeableDrawer>
+		<div className='inner' children={props.children} />
+	</div>;
+}
+
+export default function Mobile() {
+	return <MobileWrapper page='home'>
+		<h2>gert</h2>
+	</MobileWrapper>;
+}
diff --git a/styles/mobile.css b/styles/mobile.css
new file mode 100644
index 0000000..86f1372
--- /dev/null
+++ b/styles/mobile.css
@@ -0,0 +1,58 @@
+.mobile .MuiAppBar-root {
+	background-color: var(--c300);
+	color: var(--fg);
+}
+
+.mobile .MuiAppBar-root h3 {
+	margin-left: 12px;
+	font-weight: 500;
+}
+.mobile h3,
+.MuiDrawer-paper h3 {
+	font-size: 1.25rem;
+}
+
+.mobile {
+	background-color: var(--c200);
+	min-height: 100vh;
+}
+
+.mobile .inner {
+	padding: 16px;
+}
+
+.MuiDrawer-paper {
+	background-color: var(--c400) !important;
+	width: 250px;
+}
+
+.MuiDivider-root {
+	background-color: var(--c600) !important;
+	height: 2px !important;
+}
+
+.MuiDrawer-paper,
+.MuiListItemIcon-root {
+	color: var(--fg) !important;
+}
+
+.MuiDrawer-paper .MuiList-root {
+	height: 100vh;
+	position: relative;
+}
+
+.MuiDrawer-root .MuiListItem-root.Mui-selected * {
+	color: var(--piss) !important;
+}
+
+.MuiDrawer-root .MuiListItem-root.Mui-selected:after {
+	content: '';
+	position: absolute;
+	inset: 0 0 0 0;
+	background-color: var(--piss);
+	opacity: .1;
+	transition: opacity .1s;
+}
+.MuiDrawer-root .MuiListItem-root.Mui-selected:active:after {
+	opacity: .15 !important;
+}