Skip to content

Commit a8edcea

Browse files
120EE0692120EE0692
authored
fix: side panel close issue (#204)
* feat: add media query to toggle sidepanel * chore: remove css based toggle * feat: add side panel mobile using mui * chore: remove useMediaQuery,useDrag,bind,theme * style: add min width in sidepanelmobile
1 parent 9f8e2ae commit a8edcea

File tree

4 files changed

+137
-47
lines changed

4 files changed

+137
-47
lines changed

‎client/src/components/article/SidePanel.js

+1-17
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const SidePanel = ({ content, toggleSidebar, articleTitle }) => {
2929
useEffect(() => setWindowHref(window.location.href), []);
3030

3131
return (
32-
<div className={toggleSidebar ? classes.expanded : classes.wrapper}>
32+
<div>
3333
{/* Reactions */}
3434
<div className={classes.reactionsWrapper}>
3535
<span className={classes.icon}>
@@ -76,22 +76,6 @@ const useStyles = makeStyles((theme) => ({
7676
}),
7777
},
7878
},
79-
expanded: {
80-
[theme.breakpoints.down('sm')]: {
81-
minWidth: '250px',
82-
position: 'fixed',
83-
top: '-1rem',
84-
bottom: '0',
85-
left: '100%',
86-
backgroundColor: theme.palette.common.white,
87-
paddingLeft: '0',
88-
boxShadow: theme.shadows[1],
89-
transform: 'translateX(-100%)',
90-
transition: theme.transitions.create('transform', {
91-
duration: '0.5s',
92-
}),
93-
},
94-
},
9579
reactionsWrapper: {
9680
marginTop: '3rem',
9781
marginBottom: '3rem',

‎client/src/components/article/SidePanelMobile.js

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React, { useEffect, useState } from 'react';
2+
3+
// libraries
4+
import { makeStyles, SwipeableDrawer } from '@material-ui/core';
5+
import { Link } from 'react-scroll';
6+
7+
// Components
8+
import TableOfContent from './TableOfContent';
9+
import Share from '../widgets/Share';
10+
11+
const ReactionIcon = () => {
12+
const [reaction, setReaction] = useState(false);
13+
14+
return (
15+
// eslint-disable-next-line jsx-a11y/control-has-associated-label
16+
<i
17+
className={reaction ? 'fa fa-lightbulb' : 'far fa-lightbulb'}
18+
onClick={() => setReaction(!reaction)}
19+
onKeyDown={() => setReaction(!reaction)}
20+
role='button'
21+
tabIndex={0}
22+
/>
23+
);
24+
};
25+
26+
const SidePanelMobile = ({ content, articleTitle }) => {
27+
const classes = useStyles();
28+
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
29+
const [windowHref, setWindowHref] = useState(null);
30+
31+
useEffect(() => setWindowHref(window.location.href), []);
32+
33+
const toggleDrawer = (open) => (event) => {
34+
if (
35+
event &&
36+
event.type === 'keydown' &&
37+
(event.key === 'Tab' || event.key === 'Shift')
38+
) {
39+
return;
40+
}
41+
42+
setIsDrawerOpen(open);
43+
};
44+
45+
return (
46+
<div>
47+
<SwipeableDrawer
48+
anchor={'right'}
49+
open={isDrawerOpen}
50+
onClose={toggleDrawer(false)}
51+
onOpen={toggleDrawer(true)}
52+
>
53+
<div>
54+
<div className={classes.reactionsWrapper}>
55+
<span className={classes.icon}>
56+
<ReactionIcon />
57+
</span>
58+
<span className={classes.icon}>
59+
<Share title={articleTitle} url={windowHref} size={28} />
60+
</span>
61+
<span className={classes.icon}>
62+
<Link
63+
to='commentBox'
64+
smooth
65+
spy
66+
activeClass={classes.indexLinkActive}
67+
>
68+
<i className='far fa-comment' />
69+
</Link>
70+
</span>
71+
</div>
72+
<TableOfContent content={content} />
73+
</div>
74+
</SwipeableDrawer>
75+
</div>
76+
);
77+
};
78+
79+
export default SidePanelMobile;
80+
81+
const useStyles = makeStyles((theme) => ({
82+
wrapper: {
83+
marginTop: '1rem',
84+
paddingLeft: '1.5rem',
85+
zIndex: '10',
86+
height: '100%',
87+
[theme.breakpoints.down('sm')]: {
88+
position: 'fixed',
89+
top: '-1rem',
90+
bottom: '0',
91+
left: '100%',
92+
marginTop: 'unset',
93+
backgroundColor: theme.palette.common.white,
94+
paddingLeft: '0',
95+
transition: theme.transitions.create('transform', {
96+
duration: '0.5s',
97+
}),
98+
},
99+
},
100+
reactionsWrapper: {
101+
minWidth: '200px',
102+
marginTop: '3rem',
103+
marginBottom: '3rem',
104+
display: 'flex',
105+
flexDirection: 'column',
106+
justify: 'center',
107+
paddingLeft: '4rem',
108+
[theme.breakpoints.down('md')]: {
109+
paddingLeft: '1rem',
110+
},
111+
},
112+
icon: {
113+
fontSize: '28px',
114+
marginTop: '2rem',
115+
},
116+
}));

‎client/src/pages/article/[...article].jsx

-22
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { useRouter } from 'next/router';
33
import Head from 'next/head';
44

55
// Libraries
6-
import { useMediaQuery } from '@material-ui/core';
7-
import { useDrag } from 'react-use-gesture';
86
import { GraphClient } from '../../config/ApolloClient';
97
import STORES from '../../utils/getStores';
108

@@ -13,31 +11,13 @@ import Marginals from '../../components/marginals/Marginals';
1311
import Article from '../../screens/Article';
1412
import ActivityIndicator from '../../components/shared/ActivityIndicator';
1513

16-
// Assets
17-
import theme from '../../config/themes/light';
18-
1914
// Queries
2015
import getArticleByID from '../../graphql/queries/article/getArticleByID';
2116
import getArticleByOldID from '../../graphql/queries/article/getArticleByOldID';
2217
import getArticleLink, { getArticleSlug } from '../../utils/getArticleLink';
2318

2419
function ArticlePage({ article }) {
2520
const { isFallback } = useRouter();
26-
const [toggleSidebar, setToggleSidebar] = useState(false);
27-
const isMatch = useMediaQuery(theme.breakpoints.down('sm'));
28-
29-
const bind = useDrag(({ down, movement: [mx, my] }) => {
30-
if (isMatch) {
31-
if (down && mx < -10) {
32-
setToggleSidebar(true);
33-
} else if (
34-
(down && mx > 10 && toggleSidebar) ||
35-
(down && my !== 0 && toggleSidebar)
36-
) {
37-
setToggleSidebar(false);
38-
}
39-
}
40-
});
4121

4222
return (
4323
<>
@@ -138,8 +118,6 @@ function ArticlePage({ article }) {
138118
<Marginals>
139119
<Article
140120
article={article}
141-
bind={bind}
142-
toggleSidebar={toggleSidebar}
143121
/>
144122
</Marginals>
145123
)}

‎client/src/screens/Article.js

+20-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import React from 'react';
55

66
// libraries
7-
import { Container, Grid } from '@material-ui/core';
7+
import { Container, Grid, useMediaQuery } from '@material-ui/core';
88

99
// Components
1010
import Comments from '../components/article/comments';
@@ -14,11 +14,17 @@ import Disclaimer from '../components/article/Disclaimer';
1414
import ArticleTags from '../components/article/Tags';
1515
import RecommendedArticles from '../components/article/RecommendedArticles';
1616
import SidePanel from '../components/article/SidePanel';
17+
import SidePanelMobile from '../components/article/SidePanelMobile';
18+
19+
// Assets
20+
import theme from '../config/themes/light';
21+
22+
function Article({ article }) {
23+
const isMatch = useMediaQuery(theme.breakpoints.down('sm'));
1724

18-
function Article({ article, bind, toggleSidebar }) {
1925
return (
2026
<>
21-
<Container {...bind()}>
27+
<Container>
2228
<Grid container>
2329
<Grid item md={9}>
2430
<ArticleHeader article={article} />
@@ -30,11 +36,17 @@ function Article({ article, bind, toggleSidebar }) {
3036
</Grid>
3137

3238
<Grid item md={3}>
33-
<SidePanel
34-
content={article.content}
35-
toggleSidebar={toggleSidebar}
36-
articleTitle={article.title}
37-
/>
39+
{isMatch ? (
40+
<SidePanelMobile
41+
content={article.content}
42+
articleTitle={article.title}
43+
/>
44+
) : (
45+
<SidePanel
46+
content={article.content}
47+
articleTitle={article.title}
48+
/>
49+
)}
3850
</Grid>
3951
</Grid>
4052
</Container>

0 commit comments

Comments
 (0)