App Page Mobile Ready

frontend-next/src/app/app/page.js

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 
 // Dependencies
 import { useGeolocated } from "react-geolocated";
+import Drawer from '@mui/material/Drawer';
 
 // Firebase Imports
 import { auth, database } from "../../../firebase-config";
@@ -15,6 +16,8 @@ import { Header } from "../../components/app/header";
 import { HomePage } from "../../components/app/page/home";
 import { Sidebar } from "../../components/app/sidebar/home";
 
+import {useWindowSize} from "../../components/app/datatypes";
+
 /**
 * Contains most everything for the app homepage
 * @returns {Object} Home Page
@@ -24,6 +27,17 @@ function Home() {
   const [user, setUser] = useState(null); // user data
   const [loadingLoc, setLoadingLoc] = useState(true); // location variable loading, true = loading, false = finished loading
   const [authUser] = useAuthState(auth) // auth user object (used to obtain other user object)
+  const [drawerOpen, setDrawerOpen] = useState(true); // drawer open state
+
+  var windowSize = useWindowSize()
+  useEffect(() => {
+    if (windowSize.width < 767) {
+      setDrawerOpen(false)
+      console.log(windowSize, drawerOpen)
+    } else {
+      setDrawerOpen(true)
+    }
+  }, [windowSize])
 
   // Authentication Verification / Redirection if Profile Data not Filled out
   useEffect(() => {
@@ -55,15 +69,16 @@ function Home() {
   }, [coords])
 
   return (
-    <div>
+    <div className="overflow-hidden h-dvh">
       {user && (
-        <div className="grid grid-cols-4 auto-cols-max overflow-hidden">
+        <div className="overflow-hidden h-dvh">
           {/* Left Side of Page */}
-          <div className="col-span-3 h-dvh">
+          <div className="overflow-hidden h-dvh md:mr-[405px]">
             {/* Header */}
             <Header
               mainTab={"home"}
               user={user}
+              sidebarControl={() => {setDrawerOpen(!drawerOpen)}}
             />
             {/* Main Page Section */}
             <div className="mr-2 h-[calc(100%-110px)]">
@@ -76,11 +91,19 @@ function Home() {
             </div>
           </div>
           {/* Sidebar (Right Side of Page) */}
-            <Sidebar
-              user={user}
-              location={coords}
-              loadingLoc={loadingLoc}
-            />
+          <Drawer open={drawerOpen} anchor={"right"} variant={windowSize.width > 767? "persistent": "temporary"} onClose={() => {setDrawerOpen(false)}} sx={{
+          width: 400,
+          marginTop: 10,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: 400,
+            borderLeft: 0,
+          },
+          }}>
+            <div className="shadow-2xl">
+              <Sidebar user={user} location={coords} loadingLoc={loadingLoc}/>
+            </div>
+          </Drawer>
         </div>
       )}
     </div>

frontend-next/src/components/app/datatypes.js

@@ -1,4 +1,5 @@
 import Link from "next/link"
+import { useEffect, useState } from "react";
 
 // Colors for Messages
 const userColors = [
@@ -26,6 +27,31 @@ let dateOptions = {
   minute: "2-digit",
 };
 
+/**
+ * Grabs Window Size
+ * @returns {Object} - Window Size Object (width, height)
+ */
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowSize;
+}
+
+
 /**
  * Generates Color based on string hash
  * @param {String} user_str - Username / String for hashing

frontend-next/src/components/app/header.js

@@ -9,6 +9,9 @@ import { ref, set, remove } from "firebase/database";
 import { NotificationPanel } from "./notifications/notifications";
 import { ProfilePanel } from "./profile/ProfilePanel"
 
+// Icons
+import MenuIcon from '@mui/icons-material/Menu';
+
 /**
  * Closes Chat
  * @param {JSON} chatRoomObj - Chat Room Object
@@ -69,7 +72,7 @@ function removeFromMyRooms(chatRoomObj, user) {
  * @prop {JSON} chatRoomObj - Chat Room Object
  * @prop {JSON} user - User Object
  */
-export function Header({mainTab,chatRoomObj,user,}) {
+export function Header({mainTab,chatRoomObj,user,sidebarControl}) {
   
   if (mainTab == "chat") {
     var roomName = chatRoomObj.name + "-" + chatRoomObj.timestamp;
@@ -128,6 +131,14 @@ export function Header({mainTab,chatRoomObj,user,}) {
 
         {/*Profile Dropdown */}
         <ProfilePanel user={user}/>
+
+        {/* Sidebar Control (for small screens) */}
+        <div
+            className="md:hidden p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center"
+            onClick={() => {sidebarControl()}}
+          >
+            <MenuIcon/>
+          </div>
       </div>
     </div>
   );

frontend-next/src/components/app/profile/ProfilePanel.js

@@ -23,7 +23,7 @@ export function ProfilePanel({user}) {
     return (
       <Popover className="relative">
         <Popover.Button as="div">
-          <div className="mr-5 h-[44px] p-[2px] pr-[15px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
+          <div className="h-[44px] p-[2px] pr-[15px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
             <div className="flex items-center pl-1">{user.firstName}</div>
             <div className="ml-3 rounded-lg">
               <img

frontend-next/src/components/app/sidebar/home.js

@@ -86,7 +86,6 @@ export function Sidebar({user,location,loadingLoc}) {
   const [tab, setTab] = useState("nearby");
   const [nearbyArr, setNearbyArr] = useState([])
   const [nearbyArrReady, setNearbyArrReady] = useState(false)
-
   // Add myRooms to Sidebar
   var myRoomArr = [];
   for (var room in user.rooms) {
@@ -124,27 +123,27 @@ export function Sidebar({user,location,loadingLoc}) {
   }, [location])
 
   return (
-    <div className="h-dvh">
-      <div className="bg-white shadow-2xl rounded-lg m-2 h-[98%]">
+    <div className="h-dvh bg-[aliceblue] pt-2 pb-2 pl-2 pr-1">
+      <div className="bg-white rounded-lg h-[98%] mb-[10px] mt-[-18px] mr-2">
         <Tab.Group>
           <Tab.List className="bg-[#D3D3D3] rounded-lg mt-5">
             <Tab className={({ selected }) =>
                 classNames(
-                  'w-[31%]',
+                  'w-[30%]',
                   selected
                     ? 'bg-cyan-500 text-white font-bold shadow hover:bg-white/[0.6] hover:text-black'
                     : 'hover:bg-cyan-500/[0.6] hover:text-white hover:font-bold'
                 )} defaultIndex={1}>Nearby</Tab>
             <Tab className={({ selected }) =>
                 classNames(
-                  'w-[31%]',
+                  'w-[30%]',
                   selected
                     ? 'bg-cyan-500 text-white font-bold shadow hover:bg-white/[0.6] hover:text-black'
                     : 'hover:bg-cyan-500/[0.6] hover:text-white hover:font-bold'
                 )}>My Rooms</Tab>
             <Tab className={({ selected }) =>
                 classNames(
-                  'w-[31%]',
+                  'w-[30%]',
                   selected
                     ? 'bg-cyan-500 text-white font-bold shadow hover:bg-white/[0.6] hover:text-black'
                     : 'hover:bg-cyan-500/[0.6] hover:text-white hover:font-bold'