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
Monday-Morning · Jun 6, 2022 · a8edcea · a8edcea
1 parent 9f8e2ae
commit a8edcea
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 47 deletions.
diff --git 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 (
-    <div className={toggleSidebar ? classes.expanded : classes.wrapper}>
+    <div>
       {/* Reactions */}
       <div className={classes.reactionsWrapper}>
         <span className={classes.icon}>
@@ -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
@@ -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
+    <i
+      className={reaction ? 'fa fa-lightbulb' : 'far fa-lightbulb'}
+      onClick={() => 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 (
+    <div>
+      <SwipeableDrawer
+        anchor={'right'}
+        open={isDrawerOpen}
+        onClose={toggleDrawer(false)}
+        onOpen={toggleDrawer(true)}
+      >
+        <div>
+          <div className={classes.reactionsWrapper}>
+            <span className={classes.icon}>
+              <ReactionIcon />
+            </span>
+            <span className={classes.icon}>
+              <Share title={articleTitle} url={windowHref} size={28} />
+            </span>
+            <span className={classes.icon}>
+              <Link
+                to='commentBox'
+                smooth
+                spy
+                activeClass={classes.indexLinkActive}
+              >
+                <i className='far fa-comment' />
+              </Link>
+            </span>
+          </div>
+          <TableOfContent content={content} />
+        </div>
+      </SwipeableDrawer>
+    </div>
+  );
+};
+
+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
@@ -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,31 +11,13 @@ 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';
 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 }) {
         <Marginals>
           <Article
             article={article}
-            bind={bind}
-            toggleSidebar={toggleSidebar}
           />
         </Marginals>
       )}

diff --git 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 (
     <>
-      <Container {...bind()}>
+      <Container>
         <Grid container>
           <Grid item md={9}>
             <ArticleHeader article={article} />
@@ -30,11 +36,17 @@ function Article({ article, bind, toggleSidebar }) {
           </Grid>
 
           <Grid item md={3}>
-            <SidePanel
-              content={article.content}
-              toggleSidebar={toggleSidebar}
-              articleTitle={article.title}
-            />
+            {isMatch ? (
+              <SidePanelMobile
+                content={article.content}
+                articleTitle={article.title}
+              />
+            ) : (
+              <SidePanel
+                content={article.content}
+                articleTitle={article.title}
+              />
+            )}
           </Grid>
         </Grid>
       </Container>