Skip to content

Commit

Permalink
adding mobile menu in roomheader
Browse files Browse the repository at this point in the history
  • Loading branch information
@Emmyn5600
Emmyn5600 committed Mar 9, 2024
1 parent a570be7 commit 8b49894
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 75 deletions.
4 changes: 1 addition & 3 deletions packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ const MobileSideMenu = (): JSX.Element => {
alt="Icon"
width={"20px"}
height={"20px"}
style={{ cursor: "pointer" }}
onClick={() => {
setApp({ isMobileMenuOpen: !app.isMobileMenuOpen })
}}
/>
{/* <Burger opened={app.isMobileMenuOpen} /> */}
<Drawer
onClose={() => {
setApp({ isMobileMenuOpen: false })
Expand All @@ -51,12 +51,10 @@ const MobileSideMenu = (): JSX.Element => {
zIndex={1000}
styles={{
header: {
// marginTop: isSmartphone ? "4rem" : "",
backgroundColor: "transparent"
},
body: {
padding: "0 !important"
// height: "100%"
},
content: {
backgroundColor: "#141414"
Expand Down
16 changes: 9 additions & 7 deletions packages/app/src/pages/app/MainLayout.tsx/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ 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, useOutletContext } from "react-router-dom" // Import the hook
import { useNavigate } from "react-router-dom" // Import the hook
import MobileSideMenu from "../../../components/SideMenu/MobileSideMenu/MobileSideMenu"

function index({
Expand Down Expand Up @@ -31,19 +31,21 @@ function index({
nav(-1)
}}
>
<img src={iconImgSrc} alt="Icon" width={"20px"} height={"20px"} />
<img
src={iconImgSrc}
alt="Icon"
width={"20px"}
height={"20px"}
style={{ cursor: "pointer" }}
/>
</div>
)}
<div className={classes.header}>
<Text weight={700} size={""} color={theme.white}>
{title}
</Text>
</div>
{isMobile && (
<>
<MobileSideMenu />
</>
)}
<div></div>
</Flex>
<div>{children}</div>
</div>
Expand Down
133 changes: 81 additions & 52 deletions packages/app/src/pages/app/Room/RoomHeader/RoomHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,64 +5,93 @@ import UserAvatarWithIndicator from "../../../../components/UserAvatarWithIndica
import useGlobalStore from "../../../../store/useGlobalStore"
import useRoomHeaderStyles from "./useRoomHeaderStyles"
import { getAvatarImage } from "../../../../helpers/getAvatarImage"
import MobileSideMenu from "../../../../components/SideMenu/MobileSideMenu/MobileSideMenu"
import { useMediaQuery } from "@mantine/hooks"
import iconImgSrc from "../../../../../public/icons/arrow_left.svg"

const RoomHeader = (): JSX.Element => {
const { classes } = useRoomHeaderStyles()
const {
currentRoom
} = useGlobalStore()
const { classes } = useRoomHeaderStyles()
const { currentRoom } = useGlobalStore()

// @ts-expect-error
const friend = currentRoom ? currentRoom?.roomData?.relationships[0]?.userData2 : null
const navigate = useNavigate()
// @ts-nocheck
const friend = currentRoom
? currentRoom?.roomData?.relationships[0]?.userData2
: null
const navigate = useNavigate()

if (!friend) {
return <p>Error</p>
}
const theme = useMantineTheme()
if (!friend) {
return <p>Error</p>
}
const theme = useMantineTheme()

const goToProfile = () => {
navigate("/friend")
}
const goToProfile = () => {
navigate("/friend")
}
const isMobile = useMediaQuery("(max-width: 900px)")
const nav = useNavigate()

return (
<div style={{ zIndex: "9999" }}>
<div className={classes.container}>
<div className={classes.headerLeft}>
<div className={classes.participants}>
<Group
noWrap
onClick={goToProfile}
>
<Tooltip
key={friend.id}
label={friend.name}
withArrow
>
<div>
<UserAvatarWithIndicator
image={friend?.avatar_url || getAvatarImage(friend.name as string || friend.email as string || "/background.png")}
size={40}
user_email={friend.email}
/>
</div>
</Tooltip>
<Group display={"block"}>
<Flex align={"baseline"}>
<Text color={theme.white} weight={500}>
{friend.name}
</Text>
</Flex>
<Text size="xs" color="dimmed">
{"Online"}
</Text>
</Group>
</Group>
</div>
</div>
</div>
</div>
)
return (
<div>
<div className={classes.container}>
<div className={classes.headerLeft}>
<div>
{isMobile && (
<div
onClick={() => {
nav(-1)
}}
>
<img
src={iconImgSrc}
alt="Icon"
width={"20px"}
height={"20px"}
style={{ cursor: "pointer" }}
/>
</div>
)}
</div>
<div className={classes.participants}>
<Group noWrap onClick={goToProfile}>
<Tooltip key={friend.id} label={friend.name} withArrow>
<div>
<UserAvatarWithIndicator
image={
friend?.avatar_url ||
getAvatarImage(
(friend.name as string) ||
(friend.email as string) ||
"/background.png"
)
}
size={40}
user_email={friend.email}
/>
</div>
</Tooltip>
<Group display={"block"}>
<Flex align={"baseline"}>
<Text color={theme.white} weight={500}>
{friend.name}
</Text>
</Flex>
<Text size="xs" color="dimmed">
{"Online"}
</Text>
</Group>
</Group>
</div>
<div>
{isMobile && (
<>
<MobileSideMenu />
</>
)}
</div>
</div>
</div>
</div>
)
}

export default RoomHeader
24 changes: 11 additions & 13 deletions packages/app/src/pages/app/Room/RoomHeader/useRoomHeaderStyles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import { createStyles } from "@mantine/core"

const useRoomHeaderStyles = createStyles((_theme) => ({
container: {
padding: "1rem",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
container: {
padding: "1rem"
},

headerLeft: {
display: "flex",
alignItems: "center"
},
headerLeft: {
display: "flex",
alignItems: "center",
justifyContent: "space-between"
},

participants: {
cursor: "pointer"
}
participants: {
cursor: "pointer"
}
}))

export default useRoomHeaderStyles

0 comments on commit 8b49894

Please sign in to comment.