mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-07-23 04:36:52 +00:00
mobile new design
This commit is contained in:
@@ -1,35 +1,46 @@
|
||||
import * as React from 'react';
|
||||
import { BottomNavigation, BottomNavigationAction, Typography } from '@mui/material';
|
||||
import { Home, Groups, Message, ShowChart } from '@mui/icons-material';
|
||||
import Box from '@mui/material/Box';
|
||||
import BottomLogo from '../../assets/svgs/BottomLogo5.svg'
|
||||
import { CustomSvg } from '../../common/CustomSvg';
|
||||
import { WalletIcon } from '../../assets/Icons/WalletIcon';
|
||||
import { HubsIcon } from '../../assets/Icons/HubsIcon';
|
||||
import { TradingIcon } from '../../assets/Icons/TradingIcon';
|
||||
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
|
||||
import * as React from "react";
|
||||
import {
|
||||
BottomNavigation,
|
||||
BottomNavigationAction,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { Home, Groups, Message, ShowChart } from "@mui/icons-material";
|
||||
import Box from "@mui/material/Box";
|
||||
import BottomLogo from "../../assets/svgs/BottomLogo5.svg";
|
||||
import { CustomSvg } from "../../common/CustomSvg";
|
||||
import { WalletIcon } from "../../assets/Icons/WalletIcon";
|
||||
import { HubsIcon } from "../../assets/Icons/HubsIcon";
|
||||
import { TradingIcon } from "../../assets/Icons/TradingIcon";
|
||||
import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
|
||||
|
||||
const IconWrapper = ({children, label, color})=> {
|
||||
|
||||
return <Box sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '5px',
|
||||
flexDirection: 'column'
|
||||
}}>
|
||||
{children}
|
||||
<Typography sx={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "12px",
|
||||
fontWeight: 500,
|
||||
color: color
|
||||
}}>{label}</Typography>
|
||||
const IconWrapper = ({ children, label, color }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: "5px",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "12px",
|
||||
fontWeight: 500,
|
||||
color: color,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const MobileFooter =({
|
||||
selectedGroup,
|
||||
export const MobileFooter = ({
|
||||
selectedGroup,
|
||||
groupSection,
|
||||
isUnread,
|
||||
goToAnnouncements,
|
||||
@@ -44,84 +55,131 @@ selectedGroup,
|
||||
openDrawerGroups,
|
||||
goToHome,
|
||||
setIsOpenDrawerProfile,
|
||||
mobileViewMode,
|
||||
mobileViewMode,
|
||||
setMobileViewMode,
|
||||
setMobileViewModeKeepOpen
|
||||
setMobileViewModeKeepOpen,
|
||||
hasUnreadGroups,
|
||||
hasUnreadDirects
|
||||
}) => {
|
||||
const [value, setValue] = React.useState(0);
|
||||
return (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: '67px', // Footer height
|
||||
const [value, setValue] = React.useState(0);
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
backgroundColor: "var(--bg-primary)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
height: "67px", // Footer height
|
||||
zIndex: 1,
|
||||
borderTopRightRadius: '25px',
|
||||
borderTopLeftRadius: '25px'
|
||||
|
||||
}}>
|
||||
<BottomNavigation
|
||||
showLabels
|
||||
value={value}
|
||||
onChange={(event, newValue) => setValue(newValue)}
|
||||
sx={{ backgroundColor: 'transparent', flexGrow: 1 }}
|
||||
>
|
||||
<BottomNavigationAction onClick={()=> {
|
||||
borderTopRightRadius: "25px",
|
||||
borderTopLeftRadius: "25px",
|
||||
boxShadow: '0px -2px 10px rgba(0, 0, 0, 0.1)',
|
||||
}}
|
||||
>
|
||||
<BottomNavigation
|
||||
showLabels
|
||||
value={value}
|
||||
onChange={(event, newValue) => setValue(newValue)}
|
||||
sx={{ backgroundColor: "transparent", flexGrow: 1 }}
|
||||
>
|
||||
<BottomNavigationAction
|
||||
onClick={() => {
|
||||
// setMobileViewMode('wallet')
|
||||
setIsOpenDrawerProfile(true)
|
||||
}} icon={<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Wallet"><WalletIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 0 ? 'white' : 'gray', padding: '0px 10px' }} />
|
||||
<BottomNavigationAction onClick={()=> {
|
||||
setMobileViewMode('groups')
|
||||
}} icon={<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs"><HubsIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 0 ? 'white' : 'gray', paddingLeft: '10px', paddingRight: '42px' }} />
|
||||
setIsOpenDrawerProfile(true);
|
||||
}}
|
||||
icon={
|
||||
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Wallet">
|
||||
<WalletIcon color="rgba(250, 250, 250, 0.5)" />
|
||||
</IconWrapper>
|
||||
}
|
||||
sx={{ color: value === 0 ? "white" : "gray", padding: "0px 10px" }}
|
||||
/>
|
||||
<BottomNavigationAction
|
||||
onClick={() => {
|
||||
setMobileViewMode("groups");
|
||||
}}
|
||||
icon={
|
||||
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs">
|
||||
<HubsIcon color={hasUnreadGroups ? "var(--unread)" : "rgba(250, 250, 250, 0.5)"} />
|
||||
</IconWrapper>
|
||||
}
|
||||
sx={{
|
||||
color: value === 0 ? "white" : "gray",
|
||||
paddingLeft: "10px",
|
||||
paddingRight: "42px",
|
||||
}}
|
||||
/>
|
||||
</BottomNavigation>
|
||||
|
||||
</BottomNavigation>
|
||||
|
||||
{/* Floating Center Button */}
|
||||
<Box sx={{
|
||||
position: 'absolute',
|
||||
bottom: '34px', // Adjusted to float properly based on footer height
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)', // Center horizontally
|
||||
width: '59px',
|
||||
height: '59px',
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.3)', // Subtle shadow for the floating effect
|
||||
zIndex: 3,
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: '49px', // Slightly smaller inner circle
|
||||
height: '49px',
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
{/* Custom Center Icon */}
|
||||
<img src={BottomLogo} alt="center-icon" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<BottomNavigation
|
||||
showLabels
|
||||
value={value}
|
||||
onChange={(event, newValue) => setValue(newValue)}
|
||||
sx={{ backgroundColor: 'transparent', flexGrow: 1 }}
|
||||
{/* Floating Center Button */}
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: "34px", // Adjusted to float properly based on footer height
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)", // Center horizontally
|
||||
width: "59px",
|
||||
height: "59px",
|
||||
backgroundColor: "var(--bg-primary)",
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)", // Subtle shadow for the floating effect
|
||||
zIndex: 3,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "49px", // Slightly smaller inner circle
|
||||
height: "49px",
|
||||
backgroundColor: "var(--bg-primary)",
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<BottomNavigationAction onClick={()=> {
|
||||
setMobileViewModeKeepOpen('messaging')
|
||||
}} icon={<IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)"><MessagingIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 2 ? 'white' : 'gray', paddingLeft: '55px', paddingRight: '10px' }} />
|
||||
<BottomNavigationAction onClick={() => {
|
||||
chrome.tabs.create({ url: "https://www.qort.trade", active: true });
|
||||
}} icon={<IconWrapper label="Trading" color="rgba(250, 250, 250, 0.5)"><TradingIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 3 ? 'white' : 'gray' , padding: '0px 10px'}} />
|
||||
</BottomNavigation>
|
||||
{/* Custom Center Icon */}
|
||||
<img src={BottomLogo} alt="center-icon" />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
<BottomNavigation
|
||||
showLabels
|
||||
value={value}
|
||||
onChange={(event, newValue) => setValue(newValue)}
|
||||
sx={{ backgroundColor: "transparent", flexGrow: 1 }}
|
||||
>
|
||||
<BottomNavigationAction
|
||||
onClick={() => {
|
||||
setMobileViewModeKeepOpen("messaging");
|
||||
}}
|
||||
icon={
|
||||
<IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)">
|
||||
<MessagingIcon color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
</IconWrapper>
|
||||
}
|
||||
sx={{
|
||||
color: value === 2 ? "white" : "gray",
|
||||
paddingLeft: "55px",
|
||||
paddingRight: "10px",
|
||||
}}
|
||||
/>
|
||||
<BottomNavigationAction
|
||||
onClick={() => {
|
||||
chrome.tabs.create({ url: "https://www.qort.trade", active: true });
|
||||
}}
|
||||
icon={
|
||||
<IconWrapper label="Trading" color="rgba(250, 250, 250, 0.5)">
|
||||
<TradingIcon color="rgba(250, 250, 250, 0.5)" />
|
||||
</IconWrapper>
|
||||
}
|
||||
sx={{ color: value === 3 ? "white" : "gray", padding: "0px 10px" }}
|
||||
/>
|
||||
</BottomNavigation>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,17 +1,35 @@
|
||||
import React from 'react';
|
||||
import { AppBar, Toolbar, IconButton, Typography, Box, MenuItem, Select, ButtonBase } from '@mui/material';
|
||||
import { HomeIcon } from '../../assets/Icons/HomeIcon';
|
||||
import { LogoutIcon } from '../../assets/Icons/LogoutIcon';
|
||||
import { NotificationIcon } from '../../assets/Icons/NotificationIcon';
|
||||
import { ArrowDownIcon } from '../../assets/Icons/ArrowDownIcon';
|
||||
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
AppBar,
|
||||
Toolbar,
|
||||
IconButton,
|
||||
Typography,
|
||||
Box,
|
||||
MenuItem,
|
||||
Select,
|
||||
ButtonBase,
|
||||
Menu,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
} from "@mui/material";
|
||||
import { HomeIcon } from "../../assets/Icons/HomeIcon";
|
||||
import { LogoutIcon } from "../../assets/Icons/LogoutIcon";
|
||||
import { NotificationIcon } from "../../assets/Icons/NotificationIcon";
|
||||
import { ArrowDownIcon } from "../../assets/Icons/ArrowDownIcon";
|
||||
import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
|
||||
import { MessagingIcon2 } from "../../assets/Icons/MessagingIcon2";
|
||||
import { HubsIcon } from "../../assets/Icons/HubsIcon";
|
||||
|
||||
const Header = ({
|
||||
logoutFunc,
|
||||
goToHome,
|
||||
setIsOpenDrawerProfile,
|
||||
isThin,
|
||||
setMobileViewModeKeepOpen
|
||||
setMobileViewModeKeepOpen,
|
||||
hasUnreadGroups,
|
||||
hasUnreadDirects,
|
||||
setMobileViewMode,
|
||||
|
||||
// selectedGroup,
|
||||
// onHomeClick,
|
||||
// onLogoutClick,
|
||||
@@ -19,94 +37,243 @@ const Header = ({
|
||||
// onWalletClick,
|
||||
// onNotificationClick,
|
||||
}) => {
|
||||
if(isThin){
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
if (isThin) {
|
||||
return (
|
||||
<AppBar position="static" sx={{ backgroundColor: 'background: rgba(0, 0, 0, 0.2)', boxShadow: 'none' }}>
|
||||
<Toolbar sx={{ justifyContent: 'space-between', padding: '0 16px', height: '30px', minHeight: '30px' }}>
|
||||
{/* Left Home Icon */}
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '18px',
|
||||
width: '75px'
|
||||
}}>
|
||||
<IconButton edge="start" color="inherit" aria-label="home"
|
||||
onClick={()=> {
|
||||
setMobileViewModeKeepOpen('')
|
||||
goToHome()
|
||||
}}
|
||||
// onClick={onHomeClick}
|
||||
<AppBar
|
||||
position="static"
|
||||
sx={{
|
||||
backgroundColor: "background: rgba(0, 0, 0, 0.2)",
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<Toolbar
|
||||
sx={{
|
||||
justifyContent: "space-between",
|
||||
padding: "0 16px",
|
||||
height: "45px",
|
||||
minHeight: "45px",
|
||||
}}
|
||||
>
|
||||
<HomeIcon height={16} width={18} color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
<IconButton edge="start" color="inherit" aria-label="home"
|
||||
onClick={()=> {
|
||||
setMobileViewModeKeepOpen()
|
||||
goToHome()
|
||||
}}
|
||||
// onClick={onHomeClick}
|
||||
{/* Left Home Icon */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "18px",
|
||||
width: "75px",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="home"
|
||||
onClick={() => {
|
||||
setMobileViewModeKeepOpen("");
|
||||
goToHome();
|
||||
}}
|
||||
// onClick={onHomeClick}
|
||||
>
|
||||
<HomeIcon height={20} width={27} color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="home"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<NotificationIcon height={20} width={21} color={hasUnreadDirects || hasUnreadGroups ? "var(--unread)" : "rgba(145, 145, 147, 1)"} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{/* Center Title */}
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "2px",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
QORTAL
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "18px",
|
||||
width: "75px",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
{/* Right Logout Icon */}
|
||||
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
setMobileViewModeKeepOpen("messaging");
|
||||
}}
|
||||
edge="end"
|
||||
color="inherit"
|
||||
aria-label="logout"
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<MessagingIcon2 height={20} color={hasUnreadDirects ? "var(--unread)" : "rgba(145, 145, 147, 1)"}
|
||||
|
||||
/>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={logoutFunc}
|
||||
edge="end"
|
||||
color="inherit"
|
||||
aria-label="logout"
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<LogoutIcon
|
||||
height={20}
|
||||
width={21}
|
||||
color="rgba(145, 145, 147, 1)"
|
||||
/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
<Menu
|
||||
id="home-menu"
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
"aria-labelledby": "basic-button",
|
||||
}}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center',
|
||||
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center',
|
||||
}}
|
||||
slotProps={{
|
||||
paper: {
|
||||
sx: {
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
color: '#fff',
|
||||
width: '148px',
|
||||
borderRadius: '5px'
|
||||
},
|
||||
},
|
||||
|
||||
}}
|
||||
sx={{
|
||||
marginTop: '10px'
|
||||
}}
|
||||
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setMobileViewMode("groups");
|
||||
setMobileViewModeKeepOpen("")
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<NotificationIcon color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<ListItemIcon sx={{
|
||||
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<HubsIcon height={20} color={hasUnreadGroups ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"
|
||||
},
|
||||
}} primary="Hubs" />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setMobileViewModeKeepOpen("messaging");
|
||||
|
||||
{/* Center Title */}
|
||||
<Typography variant="h6" sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 700, letterSpacing: '2px' , fontSize: '13px'}}>
|
||||
QORTAL
|
||||
</Typography>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '18px',
|
||||
width: '75px',
|
||||
justifyContent: 'flex-end'
|
||||
}}>
|
||||
{/* Right Logout Icon */}
|
||||
|
||||
<IconButton onClick={()=> {
|
||||
setMobileViewModeKeepOpen('messaging')
|
||||
}} edge="end" color="inherit" aria-label="logout"
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<MessagingIcon height={16} width={16} color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
<IconButton onClick={logoutFunc} edge="end" color="inherit" aria-label="logout"
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<LogoutIcon height={16} width={14} color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)
|
||||
<ListItemIcon sx={{
|
||||
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<MessagingIcon height={20} color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"
|
||||
},
|
||||
}} primary="Messaging" />
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{/* Main Header */}
|
||||
<AppBar position="static" sx={{ backgroundColor: 'var(--bg-primary)', boxShadow: 'none' }}>
|
||||
<Toolbar sx={{ justifyContent: 'space-between', padding: '0 16px', height: '60px' }}>
|
||||
<AppBar
|
||||
position="static"
|
||||
sx={{ backgroundColor: "var(--bg-primary)", boxShadow: "none" }}
|
||||
>
|
||||
<Toolbar
|
||||
sx={{
|
||||
justifyContent: "space-between",
|
||||
padding: "0 16px",
|
||||
height: "60px",
|
||||
}}
|
||||
>
|
||||
{/* Left Home Icon */}
|
||||
<IconButton edge="start" color="inherit" aria-label="home"
|
||||
onClick={goToHome}
|
||||
// onClick={onHomeClick}
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="home"
|
||||
onClick={goToHome}
|
||||
// onClick={onHomeClick}
|
||||
>
|
||||
<HomeIcon color="rgba(145, 145, 147, 1)" />
|
||||
<HomeIcon color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
|
||||
{/* Center Title */}
|
||||
<Typography variant="h6" sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 700, letterSpacing: '2px' , fontSize: '13px'}}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "2px",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
QORTAL
|
||||
</Typography>
|
||||
|
||||
{/* Right Logout Icon */}
|
||||
<IconButton onClick={logoutFunc} edge="end" color="inherit" aria-label="logout"
|
||||
<IconButton
|
||||
onClick={logoutFunc}
|
||||
edge="end"
|
||||
color="inherit"
|
||||
aria-label="logout"
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<LogoutIcon color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
@@ -116,69 +283,160 @@ onClick={()=> {
|
||||
{/* Secondary Section */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'var(--bg-3)',
|
||||
padding: '8px 16px',
|
||||
position: 'relative',
|
||||
height: '27px'
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: "var(--bg-3)",
|
||||
padding: "8px 16px",
|
||||
position: "relative",
|
||||
height: "27px",
|
||||
}}
|
||||
>
|
||||
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
alignItems: 'center',
|
||||
userSelect: 'none'
|
||||
}}>
|
||||
<Typography sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 400, fontSize: '11px'}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontWeight: 400,
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
Palmas
|
||||
</Typography>
|
||||
{/*
|
||||
{/*
|
||||
<ArrowDownIcon /> */}
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: "absolute",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, 50%)",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
zIndex: 500,
|
||||
width: '30px', // Adjust as needed
|
||||
height: '30px', // Adjust as needed
|
||||
backgroundColor: '#232428', // Circle background
|
||||
borderRadius: '50%',
|
||||
boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.3)', // Optional shadow for the circle
|
||||
width: "30px", // Adjust as needed
|
||||
height: "30px", // Adjust as needed
|
||||
backgroundColor: "#232428", // Circle background
|
||||
borderRadius: "50%",
|
||||
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.3)", // Optional shadow for the circle
|
||||
}}
|
||||
>
|
||||
<IconButton color="inherit">
|
||||
<NotificationIcon color="rgba(255, 255, 255, 1)" />
|
||||
<IconButton onClick={handleClick} color="inherit">
|
||||
<NotificationIcon color={hasUnreadDirects || hasUnreadGroups ? "var(--unread)" : "rgba(255, 255, 255, 1)"} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{/* Right Dropdown */}
|
||||
<ButtonBase onClick={()=> {
|
||||
setIsOpenDrawerProfile(true)
|
||||
}}>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<Typography sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 400, fontSize: '11px'}}>
|
||||
View Wallet
|
||||
</Typography>
|
||||
{/* <ButtonBase
|
||||
onClick={() => {
|
||||
setIsOpenDrawerProfile(true);
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontWeight: 400,
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
View Wallet
|
||||
</Typography>
|
||||
|
||||
<ArrowDownIcon />
|
||||
</Box>
|
||||
</ButtonBase>
|
||||
<ArrowDownIcon />
|
||||
</Box>
|
||||
</ButtonBase> */}
|
||||
</Box>
|
||||
<Menu
|
||||
id="home-menu"
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
"aria-labelledby": "basic-button",
|
||||
}}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center',
|
||||
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center',
|
||||
}}
|
||||
slotProps={{
|
||||
paper: {
|
||||
sx: {
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
color: '#fff',
|
||||
width: '148px',
|
||||
borderRadius: '5px'
|
||||
},
|
||||
},
|
||||
|
||||
}}
|
||||
sx={{
|
||||
marginTop: '10px'
|
||||
}}
|
||||
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setMobileViewMode("groups");
|
||||
setMobileViewModeKeepOpen("")
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{
|
||||
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<HubsIcon height={20} color={hasUnreadGroups ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"
|
||||
},
|
||||
}} primary="Hubs" />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setMobileViewModeKeepOpen("messaging");
|
||||
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{
|
||||
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<MessagingIcon height={20} color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"
|
||||
},
|
||||
}} primary="Messaging" />
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user