hide home sidebar on mobile

src/components/HomeSidebar.tsx

@@ -0,0 +1,24 @@
+import { makeStyles } from '@material-ui/core';
+import LanguageFilter from './LanguageFilter';
+import MenuPages from './MenuPages';
+import SocialLinks from './SocialLinks';
+
+const useStyles = makeStyles((theme) => ({
+  filter: { width: 'auto', margin: theme.spacing(2, 0) },
+}));
+
+const HomeSidebar = () => {
+  const classes = useStyles();
+
+  return (
+    <aside>
+      <MenuPages />
+      <SocialLinks />
+      <div className={classes.filter}>
+        <LanguageFilter />
+      </div>
+    </aside>
+  );
+};
+
+export default HomeSidebar;

src/components/SidebarPage.tsx

@@ -1,9 +1,8 @@
-import { Grid, Hidden, makeStyles } from '@material-ui/core';
+import { Grid, makeStyles } from '@material-ui/core';
 import { Post } from '@zoonk/models';
-import LanguageFilter from './LanguageFilter';
-import MenuPages from './MenuPages';
+import HomeSidebar from './HomeSidebar';
 import PostShare from './PostShare';
-import SocialLinks from './SocialLinks';
+import useIsMobile from './useIsMobile';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -28,18 +27,15 @@ interface SidebarPageProps {
 
 const SidebarPage = ({ category, children, title }: SidebarPageProps) => {
   const classes = useStyles();
+  const isMobile = useIsMobile();
 
   return (
     <Grid container spacing={2} className={classes.container}>
-      <Grid item sm={3} xs={12}>
-        <Hidden implementation="css" xsDown>
-          <MenuPages />
-          <SocialLinks />
-          <div className={classes.filter}>
-            <LanguageFilter />
-          </div>
-        </Hidden>
-      </Grid>
+      {!isMobile && (
+        <Grid item sm={3} xs={12}>
+          <HomeSidebar />
+        </Grid>
+      )}
       <Grid item xs={12} sm={9} className={classes.column}>
         <PostShare category={category} title={title} />
         {children}

src/components/useIsMobile.ts

@@ -0,0 +1,7 @@
+import useMediaQuery from './useMediaQuery';
+
+const useIsMobile = () => {
+  return useMediaQuery(640);
+};
+
+export default useIsMobile;

src/components/useMediaQuery.ts

@@ -0,0 +1,33 @@
+import { useState, useCallback, useEffect } from 'react';
+
+/**
+ * Check if a media query meets its target.
+ * Forked from https://github.com/vercel/next-site/blob/master/components/media-query.js
+ */
+const useMediaQuery = (width: string | number) => {
+  const [targetReached, setTargetReached] = useState(false);
+
+  const updateTarget = useCallback((e) => {
+    if (e.matches) {
+      setTargetReached(true);
+    } else {
+      setTargetReached(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const media = window.matchMedia(`(max-width: ${width}px)`);
+    media.addListener(updateTarget);
+
+    // Check on mount (callback is not called until a change occurs)
+    if (media.matches) {
+      setTargetReached(true);
+    }
+
+    return () => media.removeListener(updateTarget);
+  }, [updateTarget, width]);
+
+  return targetReached;
+};
+
+export default useMediaQuery;