From c89d435b5a390aaa5b74869d35999746f060ef74 Mon Sep 17 00:00:00 2001
From: Jake Walker <hi@jakew.me>
Date: Thu, 4 Aug 2022 18:41:53 +0100
Subject: [PATCH] Finish UI skeleton

---
 frontend/src/App.tsx                    | 37 +++++++++++++----------
 frontend/src/components/ChannelList.tsx | 24 ++++++++++-----
 frontend/src/components/Header.tsx      | 39 +++++++++++++++++++++----
 frontend/src/components/MemberList.tsx  | 10 +++++--
 4 files changed, 79 insertions(+), 31 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 71f7e9f..7dc5839 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,27 +1,32 @@
-import { AppShell, Box, Grid, Stack } from "@mantine/core"
+import { AppShell, Box, Button, Grid, Group, Input, Stack } from "@mantine/core"
+import { useState } from "react"
 import ChannelList from "./components/ChannelList"
 import Header from "./components/Header"
 import MemberList from "./components/MemberList"
 import Message from "./components/Message"
 
 function App() {
+  const [opened, setOpened] = useState(false);
+
   return (
     <AppShell
-      padding="md"
-      navbar={<ChannelList />}
-      header={<Header />}>
-      <Grid>
-        <Grid.Col span={10}>
-          <Stack sx={{ overflowY: "scroll" }}>
-            {[...Array(10)].map((e, i) => (
-              <Message />
-            ))}
-          </Stack>
-        </Grid.Col>
-        <Grid.Col span={2}>
-          <MemberList />
-        </Grid.Col>
-      </Grid>
+      padding={0}
+      navbarOffsetBreakpoint="sm"
+      navbar={<ChannelList hidden={!opened} />}
+      header={<Header opened={opened} setOpened={setOpened} />}
+      aside={<MemberList />}
+    >
+      <Stack sx={{ maxHeight: "calc(100vh - 60px)" }} spacing={0}>
+        <Stack sx={{ overflowY: "auto", flexGrow: 1 }} p="md">
+          {[...Array(10)].map((e, i) => (
+            <Message />
+          ))}
+        </Stack>
+        <Group p="md" sx={(theme) => ({ borderTop: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]}`})}>
+          <Input sx={{ flexGrow: 1 }} placeholder="Message" />
+          <Button>Send</Button>
+        </Group>
+      </Stack>
     </AppShell>
   )
 }
diff --git a/frontend/src/components/ChannelList.tsx b/frontend/src/components/ChannelList.tsx
index 4d23dd0..ac601f2 100644
--- a/frontend/src/components/ChannelList.tsx
+++ b/frontend/src/components/ChannelList.tsx
@@ -1,12 +1,22 @@
-import { Navbar, NavLink } from "@mantine/core";
-import { Hash } from "react-feather";
+import { ActionIcon, Box, Button, Group, Navbar, NavLink, Stack } from "@mantine/core";
+import { Hash, Settings } from "react-feather";
 
-function ChannelList() {
+function ChannelList(props: { hidden: boolean }) {
   return (
-    <Navbar width={{ base: 300 }} p="xs">
-      {[...Array(4)].map((e, i) => (
-        <NavLink label={`Channel ${i+1}`} icon={<Hash />}/>
-      ))}
+    <Navbar width={{ base: '100%', sm: 200, md: 300 }} p="sm" hidden={props.hidden} hiddenBreakpoint="sm">
+      <Stack sx={{ flexGrow: 1 }}>
+        <Box>
+          {[...Array(4)].map((e, i) => (
+            <NavLink label={`Channel ${i+1}`} icon={<Hash />}/>
+          ))}
+        </Box>
+      </Stack>
+      <Button.Group>
+        <Button sx={{ flexGrow: 1 }}>Connect</Button>
+        <Button variant="outline">
+          <Settings size={20} />
+        </Button>
+      </Button.Group>
     </Navbar>
   )
 }
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 35c582b..8db6028 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,14 +1,41 @@
-import { Header as MHeader, Group, Text, Space } from '@mantine/core';
+import { Header as MHeader, Group, Text, MediaQuery, Burger, createStyles } from '@mantine/core';
+
+interface HeaderProps {
+  opened: boolean
+  setOpened: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const useStyles = createStyles((theme) => ({
+  title: {
+    [`@media (min-width: ${theme.breakpoints.sm}px)`]: {
+      width: "180px"
+    },
+    [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+      width: "280px"
+    }
+  }
+}))
+
+function Header(props: HeaderProps) {
+  const { classes } = useStyles();
 
-function Header() {
   return (
-    <MHeader height={60} p="xs" sx={(theme) => ({
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.blue[6],
+    <MHeader height={60} p="md" sx={(theme) => ({
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.blue[6],
       color: 'white'
     })}>
       <Group sx={{ height: "100%" }}>
-        <Text size="xl" my="auto" sx={{ width: "280px" }}>Echo Web</Text>
-        <Text size="md" my="auto">Channel 1</Text>
+        <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+          <Burger
+            opened={props.opened}
+            onClick={() => props.setOpened((o) => !o)}
+            color="white"
+            size="sm" />
+        </MediaQuery>
+        <Text size="xl" my="auto" className={classes.title}>Echo Web</Text>
+        <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
+          <Text size="md" my="auto">Channel 1</Text>
+        </MediaQuery>
       </Group>
     </MHeader>
   )
diff --git a/frontend/src/components/MemberList.tsx b/frontend/src/components/MemberList.tsx
index 719d7fc..9241b91 100644
--- a/frontend/src/components/MemberList.tsx
+++ b/frontend/src/components/MemberList.tsx
@@ -1,8 +1,14 @@
-import { Navbar, NavLink } from "@mantine/core"
+import { Aside, MediaQuery, Navbar, NavLink } from "@mantine/core"
 
 function MemberList() {
   return (
-    <p>Member List</p>
+    <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
+      <Aside p="sm" hiddenBreakpoint="sm" width={{ sm: 200, lg: 300 }}>
+        {[...Array(4)].map((e, i) => (
+          <NavLink label={`Person ${i+1}`}/>
+        ))}
+      </Aside>
+    </MediaQuery>
   )
 }