diff --git a/client/src/components/article/SidePanel.js b/client/src/components/article/SidePanel.js
index 5bba3bb2..cc052464 100644
--- a/client/src/components/article/SidePanel.js
+++ b/client/src/components/article/SidePanel.js
@@ -29,7 +29,7 @@ const SidePanel = ({ content, toggleSidebar, articleTitle }) => {
useEffect(() => setWindowHref(window.location.href), []);
return (
-
+
{/* Reactions */}
@@ -76,22 +76,6 @@ const useStyles = makeStyles((theme) => ({
}),
},
},
- expanded: {
- [theme.breakpoints.down('sm')]: {
- minWidth: '250px',
- position: 'fixed',
- top: '-1rem',
- bottom: '0',
- left: '100%',
- backgroundColor: theme.palette.common.white,
- paddingLeft: '0',
- boxShadow: theme.shadows[1],
- transform: 'translateX(-100%)',
- transition: theme.transitions.create('transform', {
- duration: '0.5s',
- }),
- },
- },
reactionsWrapper: {
marginTop: '3rem',
marginBottom: '3rem',
diff --git a/client/src/components/article/SidePanelMobile.js b/client/src/components/article/SidePanelMobile.js
new file mode 100644
index 00000000..284464d4
--- /dev/null
+++ b/client/src/components/article/SidePanelMobile.js
@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+
+// libraries
+import { makeStyles, SwipeableDrawer } from '@material-ui/core';
+import { Link } from 'react-scroll';
+
+// Components
+import TableOfContent from './TableOfContent';
+import Share from '../widgets/Share';
+
+const ReactionIcon = () => {
+ const [reaction, setReaction] = useState(false);
+
+ return (
+ // eslint-disable-next-line jsx-a11y/control-has-associated-label
+ setReaction(!reaction)}
+ onKeyDown={() => setReaction(!reaction)}
+ role='button'
+ tabIndex={0}
+ />
+ );
+};
+
+const SidePanelMobile = ({ content, articleTitle }) => {
+ const classes = useStyles();
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+ const [windowHref, setWindowHref] = useState(null);
+
+ useEffect(() => setWindowHref(window.location.href), []);
+
+ const toggleDrawer = (open) => (event) => {
+ if (
+ event &&
+ event.type === 'keydown' &&
+ (event.key === 'Tab' || event.key === 'Shift')
+ ) {
+ return;
+ }
+
+ setIsDrawerOpen(open);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SidePanelMobile;
+
+const useStyles = makeStyles((theme) => ({
+ wrapper: {
+ marginTop: '1rem',
+ paddingLeft: '1.5rem',
+ zIndex: '10',
+ height: '100%',
+ [theme.breakpoints.down('sm')]: {
+ position: 'fixed',
+ top: '-1rem',
+ bottom: '0',
+ left: '100%',
+ marginTop: 'unset',
+ backgroundColor: theme.palette.common.white,
+ paddingLeft: '0',
+ transition: theme.transitions.create('transform', {
+ duration: '0.5s',
+ }),
+ },
+ },
+ reactionsWrapper: {
+ minWidth: '200px',
+ marginTop: '3rem',
+ marginBottom: '3rem',
+ display: 'flex',
+ flexDirection: 'column',
+ justify: 'center',
+ paddingLeft: '4rem',
+ [theme.breakpoints.down('md')]: {
+ paddingLeft: '1rem',
+ },
+ },
+ icon: {
+ fontSize: '28px',
+ marginTop: '2rem',
+ },
+}));
diff --git a/client/src/pages/article/[...article].jsx b/client/src/pages/article/[...article].jsx
index ee27d431..045d11a0 100644
--- a/client/src/pages/article/[...article].jsx
+++ b/client/src/pages/article/[...article].jsx
@@ -3,8 +3,6 @@ import { useRouter } from 'next/router';
import Head from 'next/head';
// Libraries
-import { useMediaQuery } from '@material-ui/core';
-import { useDrag } from 'react-use-gesture';
import { GraphClient } from '../../config/ApolloClient';
import STORES from '../../utils/getStores';
@@ -13,9 +11,6 @@ import Marginals from '../../components/marginals/Marginals';
import Article from '../../screens/Article';
import ActivityIndicator from '../../components/shared/ActivityIndicator';
-// Assets
-import theme from '../../config/themes/light';
-
// Queries
import getArticleByID from '../../graphql/queries/article/getArticleByID';
import getArticleByOldID from '../../graphql/queries/article/getArticleByOldID';
@@ -23,21 +18,6 @@ import getArticleLink, { getArticleSlug } from '../../utils/getArticleLink';
function ArticlePage({ article }) {
const { isFallback } = useRouter();
- const [toggleSidebar, setToggleSidebar] = useState(false);
- const isMatch = useMediaQuery(theme.breakpoints.down('sm'));
-
- const bind = useDrag(({ down, movement: [mx, my] }) => {
- if (isMatch) {
- if (down && mx < -10) {
- setToggleSidebar(true);
- } else if (
- (down && mx > 10 && toggleSidebar) ||
- (down && my !== 0 && toggleSidebar)
- ) {
- setToggleSidebar(false);
- }
- }
- });
return (
<>
@@ -138,8 +118,6 @@ function ArticlePage({ article }) {
)}
diff --git a/client/src/screens/Article.js b/client/src/screens/Article.js
index 71230c55..8282a4c2 100644
--- a/client/src/screens/Article.js
+++ b/client/src/screens/Article.js
@@ -4,7 +4,7 @@
import React from 'react';
// libraries
-import { Container, Grid } from '@material-ui/core';
+import { Container, Grid, useMediaQuery } from '@material-ui/core';
// Components
import Comments from '../components/article/comments';
@@ -14,11 +14,17 @@ import Disclaimer from '../components/article/Disclaimer';
import ArticleTags from '../components/article/Tags';
import RecommendedArticles from '../components/article/RecommendedArticles';
import SidePanel from '../components/article/SidePanel';
+import SidePanelMobile from '../components/article/SidePanelMobile';
+
+// Assets
+import theme from '../config/themes/light';
+
+function Article({ article }) {
+ const isMatch = useMediaQuery(theme.breakpoints.down('sm'));
-function Article({ article, bind, toggleSidebar }) {
return (
<>
-
+
@@ -30,11 +36,17 @@ function Article({ article, bind, toggleSidebar }) {
-
+ {isMatch ? (
+
+ ) : (
+
+ )}