From a570be73d3bc2764ca13ae18c368e836aeb640a5 Mon Sep 17 00:00:00 2001 From: Emmyn5600 Date: Sat, 9 Mar 2024 19:49:20 +0200 Subject: [PATCH] adding new all in one mobile nav --- packages/app/public/icons/chat.svg | 3 + packages/app/public/icons/menu.svg | 5 + packages/app/src/App.css | 3 +- .../MobileSideMenu/MobileSideMenu.tsx | 189 +++++++++++------- .../MobileSideMenu/MobileSideMenustyles.ts | 56 ++++-- .../src/pages/app/MainLayout.tsx/index.tsx | 19 +- packages/app/src/pages/app/Room/Room.tsx | 10 +- packages/app/src/pages/app/root.tsx | 57 +----- 8 files changed, 180 insertions(+), 162 deletions(-) create mode 100644 packages/app/public/icons/chat.svg create mode 100644 packages/app/public/icons/menu.svg diff --git a/packages/app/public/icons/chat.svg b/packages/app/public/icons/chat.svg new file mode 100644 index 0000000..2c769ea --- /dev/null +++ b/packages/app/public/icons/chat.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/app/public/icons/menu.svg b/packages/app/public/icons/menu.svg new file mode 100644 index 0000000..19148e2 --- /dev/null +++ b/packages/app/public/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/app/src/App.css b/packages/app/src/App.css index 193e8ee..7b29091 100644 --- a/packages/app/src/App.css +++ b/packages/app/src/App.css @@ -5,5 +5,6 @@ h4, h5, body, p { - margin: 0; + margin: 0; + overflow: hidden; } diff --git a/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenu.tsx b/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenu.tsx index 4cd5ec6..cf2a96b 100644 --- a/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenu.tsx +++ b/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenu.tsx @@ -1,4 +1,7 @@ +import React from "react" +import { useNavigate } from "react-router" import { + Drawer, Button, Flex, Group, @@ -7,93 +10,127 @@ import { rem, Box, useMantineTheme -} from "@mantine/core" -import React from "react" -import { useNavigate } from "react-router" +} from "@mantine/core" // Import Drawer from Mantine import iconImgSrc from "../../../../public/icons/account.svg" import { getAvatarImage } from "../../../helpers/getAvatarImage" import useGlobalStore from "../../../store/useGlobalStore" import UserAvatar from "../../UserAvatar" import useSideMenuStyles from "./MobileSideMenustyles" import FriendsSideMenuScreen from "../SideMenuScreens/FriendsSideMenuScreen" +import menuImgSrc from "../../../../public/icons/menu.svg" +// import { isSmartphone } from "../../../helpers/functions" -const MobileSideMenu = ({ - closeMenu -}: { - closeMenu: () => void -}): JSX.Element => { +const MobileSideMenu = (): JSX.Element => { const { classes } = useSideMenuStyles() - const theme = useMantineTheme() const navigate = useNavigate() - const { user } = useGlobalStore() - + const { app, setApp, user } = useGlobalStore() + const theme = useMantineTheme() + const closeMenu = () => { + setApp({ isMobileMenuOpen: false }) + } return ( - - -
- - - - - - - {user.name} - - - Online - - - - - - - - - -
- - + + + + + {user.name} + + + Online + + + + + + + + + + + + + + ) } diff --git a/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenustyles.ts b/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenustyles.ts index be9dc2c..c77ae8c 100644 --- a/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenustyles.ts +++ b/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenustyles.ts @@ -3,7 +3,7 @@ import { createStyles } from "@mantine/core" const useSideMenuStyles = createStyles((theme) => ({ wrapper: { display: "flex", - width: "100%" + width: "100%", }, aside: { @@ -15,7 +15,7 @@ const useSideMenuStyles = createStyles((theme) => ({ borderRight: `1px solid ${ theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[3] }`, - padding: 5 + padding: 5, }, container: { boxSizing: "border-box", @@ -32,19 +32,19 @@ const useSideMenuStyles = createStyles((theme) => ({ color: "#ffffff", width: "100%", "@media (min-width: 1024px)": { - display: "none" - } + display: "none", + }, }, main: { flex: 1, backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] - : theme.colors.gray[0] + : theme.colors.gray[0], }, linkContainer: { maxHeight: "calc(100vh - 100px)", - overflowY: "auto" + overflowY: "auto", }, mainLink: { width: 44, @@ -62,19 +62,19 @@ const useSideMenuStyles = createStyles((theme) => ({ backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] - : theme.colors.gray[0] - } + : theme.colors.gray[0], + }, }, mainLinkActive: { "&, &:hover": { backgroundColor: theme.fn.variant({ variant: "light", - color: theme.primaryColor + color: theme.primaryColor, }).background, color: theme.fn.variant({ variant: "light", color: theme.primaryColor }) - .color - } + .color, + }, }, title: { @@ -91,7 +91,7 @@ const useSideMenuStyles = createStyles((theme) => ({ height: 60, borderBottom: `1px solid ${ theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[3] - }` + }`, }, logo: { @@ -104,13 +104,13 @@ const useSideMenuStyles = createStyles((theme) => ({ borderBottom: `1px solid ${ theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[3] }`, - marginBottom: theme.spacing.xl + marginBottom: theme.spacing.xl, }, newRoomButton: { width: "calc(100% - 20px)", margin: 10, marginTop: 0, - marginBottom: 20 + marginBottom: 20, }, link: { boxSizing: "border-box", @@ -133,23 +133,37 @@ const useSideMenuStyles = createStyles((theme) => ({ theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1], - color: theme.colorScheme === "dark" ? theme.white : theme.black - } + color: theme.colorScheme === "dark" ? theme.white : theme.black, + }, }, linkActive: { "&, &:hover": { borderLeftColor: theme.fn.variant({ variant: "filled", - color: theme.primaryColor + color: theme.primaryColor, }).background, backgroundColor: theme.fn.variant({ variant: "filled", - color: theme.primaryColor + color: theme.primaryColor, }).background, - color: theme.white - } - } + color: theme.white, + }, + }, + header: { + width: "100vw", + padding: 15, + display: "flex", + justifyContent: "space-between", + backgroundColor: + theme.colorScheme === "dark" + ? theme.colors.dark[9] + : theme.colors.gray[1], + + borderBottom: `1px solid ${ + theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[3] + }`, + }, })) export default useSideMenuStyles diff --git a/packages/app/src/pages/app/MainLayout.tsx/index.tsx b/packages/app/src/pages/app/MainLayout.tsx/index.tsx index b57395a..a67f921 100644 --- a/packages/app/src/pages/app/MainLayout.tsx/index.tsx +++ b/packages/app/src/pages/app/MainLayout.tsx/index.tsx @@ -3,9 +3,10 @@ import { Flex, Text, useMantineTheme } from "@mantine/core" import useSideMenuStyles from "./LayoutStyles" import iconImgSrc from "../../../../public/icons/arrow_left.svg" import { useMediaQuery } from "@mantine/hooks" -import { useNavigate } from "react-router-dom" +import { useNavigate, useOutletContext } from "react-router-dom" // Import the hook +import MobileSideMenu from "../../../components/SideMenu/MobileSideMenu/MobileSideMenu" -function index ({ +function index({ children, title }: { @@ -19,13 +20,17 @@ function index ({ return (
{isMobile && ( -
{ nav(-1) }}> +
{ + nav(-1) + }} + > Icon
)} @@ -34,7 +39,11 @@ function index ({ {title}
-
+ {isMobile && ( + <> + + + )}
{children}
diff --git a/packages/app/src/pages/app/Room/Room.tsx b/packages/app/src/pages/app/Room/Room.tsx index f00a0d6..ddf7be9 100644 --- a/packages/app/src/pages/app/Room/Room.tsx +++ b/packages/app/src/pages/app/Room/Room.tsx @@ -6,7 +6,7 @@ import useListenToMessagesChanges from "../../../Hooks/rooms/useListenToMessages import useLoadUnreadMessages from "../../../Hooks/rooms/useLoadUnreadMessages" import useTypingStatus from "../../../Hooks/rooms/useTypingStatus" import useGlobalStore, { - type IDatabaseMessage + type IDatabaseMessage, } from "../../../store/useGlobalStore" import Messages from "./Messages/Messages" import MessagesTextInput from "./MessagesTextInput/MessagesTextInput" @@ -23,7 +23,7 @@ const Room = ({ roomId, getRoomData }: Props): JSX.Element => { const supabase = useSupabaseClient() const { classes } = useRoomStyles() const { - currentRoom: { roomData, isRoomMember } + currentRoom: { roomData, isRoomMember }, } = useGlobalStore() const { getRoomMessages } = useGetRoomMessages() @@ -49,8 +49,8 @@ const Room = ({ roomId, getRoomData }: Props): JSX.Element => { const { currentRoom } = useGlobalStore() const friend = currentRoom - // @ts-expect-error - ? currentRoom?.roomData?.relationships[0]?.userData2 + ? // @ts-expect-error + currentRoom?.roomData?.relationships[0]?.userData2 : null return ( @@ -61,7 +61,7 @@ const Room = ({ roomId, getRoomData }: Props): JSX.Element => { backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url(${ friend?.avatar_url || getAvatarImage((friend?.name ?? friend?.email ?? "") as string) - })` + })`, }} >
diff --git a/packages/app/src/pages/app/root.tsx b/packages/app/src/pages/app/root.tsx index 8d616b9..8cf81e0 100644 --- a/packages/app/src/pages/app/root.tsx +++ b/packages/app/src/pages/app/root.tsx @@ -1,4 +1,3 @@ -import { Burger, Drawer } from "@mantine/core" import { useMediaQuery } from "@mantine/hooks" import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react" import React, { useEffect } from "react" @@ -15,7 +14,6 @@ import removeTypingIndicatorFromOfflineUsers from "../../helpers/removeTypingInd import useGlobalStore, { initialState } from "../../store/useGlobalStore" import OAuthUser from "./../../components/OAuthUser" import useRootStyles from "./useRootStyles" -import MobileSideMenu from "../../components/SideMenu/MobileSideMenu/MobileSideMenu" const Root = (): JSX.Element => { const { getUserFriends, getUserRoomData } = useLoadUserData() @@ -32,7 +30,6 @@ const Root = (): JSX.Element => { const session = useSession() const supabase = useSupabaseClient() const { - app, setApp, currentRoom: { usersTyping }, setCurrentRoom, @@ -63,8 +60,8 @@ const Root = (): JSX.Element => { }, [location, session]) useEffect(() => { - if (!session) return; - (async () => { + if (!session) return + ;(async () => { getUnreadMessages() })() }, [session]) @@ -124,55 +121,7 @@ const Root = (): JSX.Element => { marginTop: isSmartphone ? "8rem" : "0" }} > - {isMobile ? ( - <> -
-

COJOURNEY

- { - setApp({ isMobileMenuOpen: true }) - }} - /> -
- { - setApp({ isMobileMenuOpen: false }) - }} - opened={app.isMobileMenuOpen} - overlayProps={{ blur: 5 }} - position="right" - withCloseButton - zIndex={100} - styles={{ - header: { - marginTop: isSmartphone ? "4rem" : "", - backgroundColor: "transparent" - }, - body: { - padding: "0 !important", - height: "94%" - }, - content: { - backgroundColor: "#141414" - } - }} - > - { - setApp({ isMobileMenuOpen: false }) - }} - /> - - - ) : ( - {}} /> - )} + {!isMobile && {}} />}