Skip to content

Commit

Permalink
fix head items alignment
Browse files Browse the repository at this point in the history
  • Loading branch information
@RNR1
RNR1 committed Jul 9, 2024
1 parent 9536e6a commit 43768c2
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 182 deletions.
72 changes: 36 additions & 36 deletions src/components/Buttons/DropLink.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
import { Button } from "@mui/material";
import { styled } from "@mui/styles";
import { Button } from '@mui/material';
import { styled } from '@mui/styles';

const DropLink = styled(Button)(({ theme }) => ({
color: '#2D3748',
backgroundColor: 'transparent',
width: 'fit-content',
textDecoration: 'none',
margin: '10px 25px',
borderRadius: '24px',
padding: '0 20px',
fontSize: '16px',
'& span': {
borderRadius: '24px'
},
'& svg': {
width: '36px',
height: '36px',
margin: '4px 0'
},
'&:hover': {
backgroundColor: '#5286E9',
color: '#fff'
},
'&:nth-child(1):hover svg path': {
stroke: '#fff',
fill: '#fff'
},
'&:nth-child(2):hover svg path': {
stroke: '#fff'
},
'&:nth-child(3):hover svg path': {
stroke: '#fff'
},
'&:nth-child(4):hover svg path': {
stroke: '#fff'
}
color: '#2D3748',
backgroundColor: 'transparent',
width: 'fit-content',
textDecoration: 'none',
margin: '10px 10px',
borderRadius: '24px',
padding: '0 20px',
fontSize: '16px',
'& span': {
borderRadius: '24px'
},
'& svg': {
width: '36px',
height: '36px',
margin: '4px 0'
},
'&:hover': {
backgroundColor: '#5286E9',
color: '#fff'
},
'&:nth-child(1):hover svg path': {
stroke: '#fff',
fill: '#fff'
},
'&:nth-child(2):hover svg path': {
stroke: '#fff'
},
'&:nth-child(3):hover svg path': {
stroke: '#fff'
},
'&:nth-child(4):hover svg path': {
stroke: '#fff'
}
}));

export default DropLink;
export default DropLink;
238 changes: 103 additions & 135 deletions src/components/DesktopHead/DesktopHead.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,144 +5,112 @@ import { ReactComponent as PhlaskIcon } from '../../components/icons/PHLASK_v2.s
import { ReactComponent as PhlaskNoTextIcon } from '../../components/icons/PhlaskNoText.svg';
import { ReactComponent as UsersIcon } from '../../components/icons/UsersIcon.svg';
import { ReactComponent as IDIcon } from '../../components/icons/ModalIDRequired.svg';
import { ReactComponent as FilterIcon } from '../../components/icons/FilterIcon.svg';
import { ReactComponent as SearchIcon } from '../../components/icons/SearchIcon.svg';
import { HeaderContext } from '../../contexts/HeaderContext';
import DropLink from '../../components/Buttons/DropLink';
import {
TOOLBAR_MODAL_FILTER,
TOOLBAR_MODAL_NONE,
TOOLBAR_MODAL_SEARCH,
} from '../../actions/actions';

export const DesktopHead = (props) => {
const headerContext = React.useContext(HeaderContext);
const {
shownPage,
menuClicked,
toggleMenuExpand,
menuExpand,
setShowMapControls,
showMapControls,
pageExpand,
verticalAnimFinished1,
verticalAnimFinished2,
setVerticalAnimFinished1,
setVerticalAnimFinished2,
} = headerContext;
return (
<Box
sx={{
backgroundColor: 'transparent',
position: 'absolute',
maxWidth: '100%',
zIndex: '9',
margin: '25px auto 0 25px'
}}
>
<Paper
export const DesktopHead = props => {
const headerContext = React.useContext(HeaderContext);
const {
shownPage,
menuClicked,
toggleMenuExpand,
menuExpand,
setShowMapControls,
showMapControls,
pageExpand,
verticalAnimFinished1,
verticalAnimFinished2,
setVerticalAnimFinished1,
setVerticalAnimFinished2
} = headerContext;
return (
<Box
backgroundColor="transparent"
position="absolute"
maxWidth="100%"
zIndex="9"
margin="25px auto 0 25px"
>
<Paper
sx={{
display: 'grid',
gridAutoRows: 'min-content',
gridTemplateColumns: '310px 1fr',
borderRadius: '10px'
}}
>
<Box height="fit-content">
<Box width={310}>
<IconButton
sx={{
margin: '15px'
}}
onClick={toggleMenuExpand}
data-cy="head-sidebar-button"
>
<CloseIcon close={menuExpand} />
</IconButton>
<Button
href="/"
sx={{
margin: '15px'
}}
onClick={() => setShowMapControls(true)}
>
<PhlaskIcon
sx={{
display: 'grid',
gridAutoRows: 'min-content',
gridTemplateColumns: '310px 1fr',
borderRadius: '10px'
position: 'relative',
top: '-10px'
}}
>
<Box sx={{ height: 'fit-content' }}>
<Box width={310}>
<IconButton
sx={{
margin: '15px'
}}
onClick={toggleMenuExpand}
data-cy="head-sidebar-button"
>
<CloseIcon close={menuExpand} />
</IconButton>
<Button
href="/"
sx={{
margin: '15px'
}}
onClick={() => setShowMapControls(true)}
>
<PhlaskIcon
sx={{
position: 'relative',
top: '-10px'
}}
/>
</Button>
</Box>
<Collapse
in={pageExpand}
timeout="auto"
onEntered={() => {
if (pageExpand) {
setVerticalAnimFinished1(true);
}
}}
>
<Box sx={{ height: '50px' }}></Box>
</Collapse>
<Collapse in={menuExpand} timeout="auto">
<Box
sx={{
display: 'flex',
flexDirection: 'column'
}}
>
<DropLink
onClick={() => menuClicked('about')}
startIcon={<PhlaskNoTextIcon />}
data-cy="sidebar-about-button"
>
About
</DropLink>
<DropLink
onClick={() => menuClicked('join')}
startIcon={<UsersIcon />}
data-cy="sidebar-jointeam-button"
>
Join the team
</DropLink>
<DropLink
onClick={() => menuClicked('contact')}
startIcon={<IDIcon />}
data-cy="sidebar-contact-button"
>
Contact
</DropLink>
</Box>
</Collapse>
<Collapse
in={pageExpand}
timeout="auto"
onEntered={() => {
if (pageExpand) {
setVerticalAnimFinished2(true);
}
}}
>
<Box
sx={{
height:
'calc(100vh - 50px - 25px - 274px - 76px - 32px - 25px)'
}}
></Box>
</Collapse>
</Box>
<Collapse orientation="horizontal" in={pageExpand} timeout="auto">
<Box
sx={{
width: 'min(900px, calc(100vw - 25px - 25px - 310px))',
padding: '25px'
}}
>
{verticalAnimFinished1 && verticalAnimFinished2 && shownPage}
</Box>
</Collapse>
</Paper>
/>
</Button>
</Box>
<Collapse
in={pageExpand}
timeout="auto"
onEntered={() => {
if (pageExpand) {
setVerticalAnimFinished1(true);
}
}}
></Collapse>
<Collapse in={menuExpand} timeout="auto">
<Box display="flex" flexDirection="column">
<DropLink
onClick={() => menuClicked('about')}
startIcon={<PhlaskNoTextIcon />}
data-cy="sidebar-about-button"
>
About
</DropLink>
<DropLink
onClick={() => menuClicked('join')}
startIcon={<UsersIcon />}
data-cy="sidebar-jointeam-button"
>
Join the team
</DropLink>
<DropLink
onClick={() => menuClicked('contact')}
startIcon={<IDIcon />}
data-cy="sidebar-contact-button"
>
Contact
</DropLink>
</Box>
</Collapse>
</Box>
);
}
<Collapse orientation="horizontal" in={pageExpand} timeout="auto">
<Box
sx={{
width: 'min(900px, calc(100vw - 25px - 25px - 310px))',
padding: '25px'
}}
>
{verticalAnimFinished1 && verticalAnimFinished2 && shownPage}
</Box>
</Collapse>
</Paper>
</Box>
);
};
11 changes: 0 additions & 11 deletions src/components/MobileHead/MobileHead.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,17 +114,6 @@ function MobileHead() {
</IconButton>
</Box>
</Box>
<Collapse
in={pageExpand}
timeout="auto"
onEntered={() => {
if (pageExpand) {
setVerticalAnimFinished1(true);
}
}}
>
<Box sx={{ height: '50px' }}></Box>
</Collapse>
<Collapse in={menuExpand} timeout="auto">
<Box
sx={{
Expand Down

0 comments on commit 43768c2

Please sign in to comment.