redo basic ui

src/App.js

@@ -1,4 +1,3 @@
-import { Container } from '@mui/material';
 import { AuthForm } from './Components/AuthForm';
 import { Home } from './Components/Home';
 import { Routes, Route } from 'react-router-dom';
@@ -7,19 +6,17 @@ import { PrivateRoute } from './Components/PrivateRoute';
 function App() {
   return (
     <>
-      <Container maxWidth="xs" height="100vh">
-        <Routes>
-          <Route
-            path="/"
-            element={
-              <PrivateRoute>
-                <Home />
-              </PrivateRoute>
-            }
-          />
-          <Route path="/auth" element={<AuthForm />} />
-        </Routes>
-      </Container>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <PrivateRoute>
+              <Home />
+            </PrivateRoute>
+          }
+        />
+        <Route path="/auth" element={<AuthForm />} />
+      </Routes>
     </>
   );
 }

src/Components/Appbar.js

@@ -1,48 +0,0 @@
-import { useState } from 'react';
-import { Box, AppBar, Typography, Toolbar, IconButton } from '@mui/material';
-import AccountCircle from '@mui/icons-material/AccountCircle';
-import { UserProfile } from './UserProfile';
-
-export const Appbar = () => {
-  const [showDrawer, setShowDrawer] = useState(false);
-
-  const toggleDrawer = () => (event) => {
-    if (
-      event.type === 'keydown' &&
-      (event.key === 'Tab' || event.key === 'Shift')
-    ) {
-      return;
-    }
-
-    setShowDrawer((showDrawer) => !showDrawer);
-  };
-
-  return (
-    <Box>
-      <AppBar>
-        <Toolbar>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            supachat
-          </Typography>
-          <div>
-            <IconButton
-              size="large"
-              aria-label="account of current user"
-              aria-controls="menu-appbar"
-              aria-haspopup="true"
-              onClick={toggleDrawer()}
-              color="inherit"
-            >
-              <AccountCircle />
-            </IconButton>
-            <UserProfile
-              toggleDrawer={toggleDrawer}
-              showDrawer={showDrawer}
-              setShowDrawer={setShowDrawer}
-            />
-          </div>
-        </Toolbar>
-      </AppBar>
-    </Box>
-  );
-};

src/Components/AuthForm.js

@@ -51,15 +51,16 @@ export function AuthForm({ setSession }) {
   return (
     <Box
       sx={{
-        minWidth: 250,
-        display: 'flex',
         marginTop: 5,
+        display: 'flex',
+        alignContent: 'center',
+        justifyContent: 'center',
       }}
     >
       <Box
         sx={{
-          flexGrow: 1,
           border: 1,
+          minWidth: 350,
         }}
       >
         <AppBar position="static">

src/Components/Channels.js

@@ -0,0 +1,39 @@
+import { Box, Drawer, Toolbar, Divider, Typography } from '@mui/material';
+
+export function Channels({ drawerWidth, showChannels, setShowChannels }) {
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <Drawer
+        PaperProps={{
+          sx: {
+            width: 300,
+          },
+        }}
+        anchor="left"
+        open={showChannels}
+        onClose={() => setShowChannels(false)}
+        sx={{
+          width: drawerWidth,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: drawerWidth,
+          },
+        }}
+        variant="persistent"
+      >
+        <Toolbar variant="dense" sx={{ flexDirection: 'row' }}>
+          <Box sx={{ flexGrow: 1 }}>
+            <Typography
+              variant="subtitle2"
+              component="div"
+              sx={{ flexGrow: 1, textTransform: 'uppercase' }}
+            >
+              channels
+            </Typography>
+          </Box>
+        </Toolbar>
+        <Divider />
+      </Drawer>
+    </Box>
+  );
+}

src/Components/Home.js

@@ -1,19 +1,120 @@
-import { Box } from '@mui/material';
-import { Appbar } from './Appbar';
+import { useState } from 'react';
+import { Box, Typography, Toolbar, IconButton } from '@mui/material';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import MenuIcon from '@mui/icons-material/Menu';
+import { styled } from '@mui/material/styles';
+import MuiAppBar from '@mui/material/AppBar';
+import { UserProfile } from './UserProfile';
+import { Channels } from './Channels';
 import { Messages } from './Messages';
 
 export const Home = () => {
+  const [showProfile, setShowProfile] = useState(false);
+  const [showChannels, setShowChannels] = useState(false);
+
+  const toggleProfile = () => (event) => {
+    if (
+      event.type === 'keydown' &&
+      (event.key === 'Tab' || event.key === 'Shift')
+    ) {
+      return;
+    }
+
+    setShowProfile((showProfile) => !showProfile);
+  };
+
+  const toggleChannels = () => (event) => {
+    setShowChannels((showChannels) => !showChannels);
+  };
+
+  const drawerWidth = 200;
+
+  const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
+    ({ theme, open }) => ({
+      flexGrow: 1,
+      transition: theme.transitions.create('margin', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      marginLeft: 0,
+      ...(open && {
+        transition: theme.transitions.create('margin', {
+          easing: theme.transitions.easing.easeOut,
+          duration: theme.transitions.duration.enteringScreen,
+        }),
+        marginLeft: drawerWidth,
+      }),
+    })
+  );
+
+  const AppBar = styled(MuiAppBar, {
+    shouldForwardProp: (prop) => prop !== 'open',
+  })(({ theme, open }) => ({
+    transition: theme.transitions.create(['margin', 'width'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    ...(open && {
+      width: `calc(100% - ${drawerWidth}px)`,
+      marginLeft: `${drawerWidth}px`,
+      transition: theme.transitions.create(['margin', 'width'], {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+    }),
+  }));
+
+  const DrawerHeader = styled('div')(({ theme }) => ({
+    ...theme.mixins.denseToolbar,
+  }));
+
   return (
-    <>
-      <Appbar />
-      <Box>
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
+    <Box sx={{ display: 'flex' }}>
+      <AppBar position="fixed" open={showChannels}>
+        <Toolbar disableGutters variant="dense" sx={{ mx: 1 }}>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            edge="start"
+            size="small"
+            onClick={toggleChannels()}
+          >
+            <MenuIcon />
+          </IconButton>
+
+          <Typography
+            variant="subtitle2"
+            component="div"
+            sx={{ flexGrow: 1, textTransform: 'uppercase' }}
+          >
+            supachat
+          </Typography>
+          <div>
+            <IconButton
+              color="inherit"
+              edge="end"
+              size="small"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={toggleProfile()}
+            >
+              <AccountCircle />
+            </IconButton>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <DrawerHeader />
+      <Main open={showChannels}>
+        <DrawerHeader />
         <Messages />
-      </Box>
-    </>
+      </Main>
+      <Channels
+        showChannels={showChannels}
+        setShowChannels={setShowChannels}
+        drawerWidth={drawerWidth}
+      />
+      <UserProfile showProfile={showProfile} setShowProfile={setShowProfile} />
+    </Box>
   );
 };

src/Components/Messages.js

@@ -1,6 +1,5 @@
 import { useState, useEffect } from 'react';
 import { supabase } from '../supabaseClient';
-import { Box } from '@mui/material';
 
 export const Messages = () => {
   const [data, setData] = useState([]);
@@ -13,16 +12,12 @@ export const Messages = () => {
   }, []);
 
   return (
-    <Box>
-      THINGS TO DO: userlist, rooms, msg subscriptions msgs: <br />
-      <br />
-      <br />
-      <br />
+    <>
       {data.map((msg) => (
         <div key={msg.id}>
           {msg.created_at}: {msg.username} {msg.message}
         </div>
       ))}
-    </Box>
+    </>
   );
 };

src/Components/UserProfile.js

@@ -8,20 +8,20 @@ import {
   TextField,
   Divider,
   Stack,
-  FormControl,
+  Typography,
 } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 import { useAuth } from '../Contexts/AuthContext';
 import { useSnackbar } from '../Contexts/SnackbarContext';
-import CloseIcon from '@mui/icons-material/Close';
 
-export const UserProfile = ({ showDrawer, setShowDrawer }) => {
+export const UserProfile = ({ showProfile, setShowProfile }) => {
   const { user, signOut, updateUserMetaData } = useAuth();
   const { showSnackBar } = useSnackbar();
   const [profileInputs, setProfileInputs] = useState({ username: '' });
 
   useEffect(() => {
     setProfileInputs({ username: user.user_metadata.username });
-  }, [showDrawer, user]);
+  }, [showProfile, user]);
 
   const handleChange = ({ target: { name, value } }) => {
     setProfileInputs({ ...profileInputs, [name]: value });
@@ -35,7 +35,7 @@ export const UserProfile = ({ showDrawer, setShowDrawer }) => {
       });
       if (res) {
         showSnackBar('success', 'nickname updated');
-        setShowDrawer(false);
+        setShowProfile(false);
       }
     }
   };
@@ -50,22 +50,38 @@ export const UserProfile = ({ showDrawer, setShowDrawer }) => {
     <Drawer
       PaperProps={{
         sx: {
-          // width: 1
-          width: 350,
+          width: 280,
         },
       }}
       anchor="right"
-      open={showDrawer}
-      onClose={() => setShowDrawer(false)}
+      open={showProfile}
+      onClose={() => setShowProfile(false)}
     >
-      <Toolbar sx={{ flexDirection: 'row' }}>
-        <Box sx={{ flexGrow: 1 }}>user profile</Box>
-        <IconButton onClick={() => setShowDrawer(false)}>
+      <Toolbar
+        disableGutters
+        variant="dense"
+        sx={{ flexDirection: 'row', mx: 1 }}
+      >
+        <Box sx={{ flexGrow: 1 }}>
+          {' '}
+          <Typography
+            variant="subtitle2"
+            component="div"
+            sx={{ flexGrow: 1, textTransform: 'uppercase' }}
+          >
+            user profile
+          </Typography>
+        </Box>
+        <IconButton
+          edge="end"
+          size="small"
+          onClick={() => setShowProfile(false)}
+        >
           <CloseIcon />
         </IconButton>
       </Toolbar>
       <Divider />
-      <Stack m={2} spacing={2} component="form">
+      <Stack height={1} m={2} spacing={2} component="form">
         <TextField
           name="username"
           label="username"
@@ -80,6 +96,7 @@ export const UserProfile = ({ showDrawer, setShowDrawer }) => {
         <Button type="submit" fullWidth onClick={(e) => handleUpdate(e)}>
           update profile
         </Button>
+        <Divider sx={{ flex: 1 }} />
         <Button fullWidth onClick={(e) => handleSignOut(e)}>
           signout
         </Button>

src/index.js

@@ -11,6 +11,11 @@ const theme = createTheme({
   palette: {
     mode: 'dark',
   },
+  mixins: {
+    denseToolbar: {
+      minHeight: 48,
+    },
+  },
 });
 
 ReactDOM.render(