Skip to content

Commit

Permalink
adding new all in one mobile nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@Emmyn5600
Emmyn5600 committed Mar 9, 2024
1 parent e4ec381 commit a570be7
Show file tree
Hide file tree
Showing 8 changed files with 180 additions and 162 deletions.
3 changes: 3 additions & 0 deletions packages/app/public/icons/chat.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions packages/app/public/icons/menu.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion packages/app/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@ h4,
h5,
body,
p {
margin: 0;
margin: 0;
overflow: hidden;
}
189 changes: 113 additions & 76 deletions packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import React from "react"
import { useNavigate } from "react-router"
import {
Drawer,
Button,
Flex,
Group,
Expand All @@ -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 (
<Navbar className={classes.container}>
<Navbar.Section className={classes.wrapper} grow>
<div className={classes.main}>
<Flex direction={"column"} justify={"space-between"}>
<Flex
pos={"absolute"}
bottom={"0"}
w={"100%"}
p={"xl"}
direction={"row"}
gap={"xl"}
align={"center"}
justify="space-between"
>
<Group>
<UserAvatar
src={
user.avatar_url ||
getAvatarImage(user.name || user.email || "")
}
online={true}
/>
<Box w={96.5}>
<Text color={theme.white} weight={500} truncate="end">
{user.name}
</Text>
<Text size="xs" color="dimmed">
Online
</Text>
</Box>
</Group>
<Group
style={{
textAlign: "center"
}}
>
<Button
size={"sm"}
bg={"#292929"}
style={{
display: "flex",
alignItems: "center",
backgroundColor: "#292929",
paddingLeft: rem(20),
color: "#757474"
}}
onClick={() => {
navigate("/profile")
closeMenu()
}}
<>
<img
src={menuImgSrc}
alt="Icon"
width={"20px"}
height={"20px"}
onClick={() => {
setApp({ isMobileMenuOpen: !app.isMobileMenuOpen })
}}
/>
{/* <Burger opened={app.isMobileMenuOpen} /> */}
<Drawer
onClose={() => {
setApp({ isMobileMenuOpen: false })
}}
opened={app.isMobileMenuOpen}
overlayProps={{ blur: 5 }}
position="right"
withCloseButton
zIndex={1000}
styles={{
header: {
// marginTop: isSmartphone ? "4rem" : "",
backgroundColor: "transparent"
},
body: {
padding: "0 !important"
// height: "100%"
},
content: {
backgroundColor: "#141414"
}
}}
>
<Navbar className={classes.container}>
<Navbar.Section className={classes.wrapper} grow>
<div className={classes.main}>
<Flex direction={"column"} justify={"space-between"}>
<Flex
pos={"absolute"}
bottom={"0"}
w={"100%"}
p={"xl"}
direction={"row"}
gap={"xl"}
align={"center"}
justify="space-between"
>
<Text mr={"md"}>My Account</Text>
<img
src={iconImgSrc}
alt="Icon"
width={"20px"}
height={"20px"}
/>
</Button>
</Group>
</Flex>
<FriendsSideMenuScreen />
</Flex>
</div>
</Navbar.Section>
</Navbar>
<Group>
<UserAvatar
src={
user.avatar_url ||
getAvatarImage(user.name || user.email || "")
}
online={true}
/>
<Box w={96.5}>
<Text color={theme.white} weight={500} truncate="end">
{user.name}
</Text>
<Text size="xs" color="dimmed">
Online
</Text>
</Box>
</Group>
<Group
style={{
textAlign: "center"
}}
>
<Button
size={"sm"}
bg={"#292929"}
style={{
display: "flex",
alignItems: "center",
backgroundColor: "#292929",
paddingLeft: rem(20),
color: "#757474"
}}
onClick={() => {
navigate("/profile")
closeMenu()
}}
>
<Text mr={"md"}>My Account</Text>
<img
src={iconImgSrc}
alt="Icon"
width={"20px"}
height={"20px"}
/>
</Button>
</Group>
</Flex>
<FriendsSideMenuScreen />
</Flex>
</div>
</Navbar.Section>
</Navbar>
</Drawer>
</>
)
}

Expand Down
56 changes: 35 additions & 21 deletions packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenustyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { createStyles } from "@mantine/core"
const useSideMenuStyles = createStyles((theme) => ({
wrapper: {
display: "flex",
width: "100%"
width: "100%",
},

aside: {
Expand All @@ -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",
Expand All @@ -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,
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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",
Expand All @@ -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
Loading

0 comments on commit a570be7

Please sign in to comment.