mobile categories + routes

app/components/Article/article.css

@@ -140,4 +140,7 @@ h1.teal {
   article .footer-comtainer > div:nth-child(-n + 2) {
     flex: 1 1;
   }
+  article {
+    margin: 0;
+  }
 }

app/components/CategoriesNav/Menu.tsx

@@ -3,7 +3,7 @@ import {Link} from '@remix-run/react'
 import {SearchInput} from '../SearchInput/Input'
 import {Tag as TagType} from '~/server-utils/stampy'
 import {tagUrl} from '~/routesMapper'
-import styles from './menu.module.css'
+import './menu.css'
 
 interface CategoriesNavProps {
   /**
@@ -19,7 +19,7 @@ interface CategoriesNavProps {
 export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps) => {
   const [search, onSearch] = useState('')
   return (
-    <div className={styles.categoriesGroup + ' bordered col-4-5'}>
+    <div className={'categoriesGroup bordered col-4-5'}>
       <h4>Categories</h4>
       <div>
         <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />
@@ -30,9 +30,7 @@ export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps
           <Link
             key={tagId}
             to={tagUrl({tagId, name})}
-            className={[styles.categoryTitle, activeCategoryId == tagId ? 'selected' : ''].join(
-              ' '
-            )}
+            className={['categoryTitle', activeCategoryId == tagId ? 'selected' : ''].join(' ')}
           >
             {name} ({questions.length})
           </Link>

app/components/CategoriesNav/menu.css

@@ -0,0 +1,25 @@
+.categoriesGroup {
+  padding: var(--spacing-12);
+}
+.categoriesGroup > * {
+  padding: var(--spacing-16);
+}
+.categoryTitle {
+  padding: var(--spacing-24);
+  cursor: pointer;
+  display: inline-block;
+  width: 100%;
+}
+@media (max-width: 640px) {
+  .categoriesGroup {
+    width: 100%;
+    height: 100%;
+  }
+  .categoriesGroup.bordered {
+    border: 0;
+    box-shadow: none;
+  }
+  .categoryTitle.selected {
+    background: inherit;
+  }
+}

app/hooks/isMobile.tsx

@@ -0,0 +1,25 @@
+import {useState, useEffect} from 'react'
+
+export default function isMobile() {
+  const mobileWidth = 640
+  const [windowWidth, setWindowWidth] = useState<number>(0)
+
+  const isWindow = typeof window !== 'undefined'
+
+  const getWidth = () => (isWindow ? window.innerWidth : windowWidth)
+
+  const resize = () => setWindowWidth(getWidth())
+
+  useEffect(() => {
+    if (isWindow) {
+      setWindowWidth(getWidth())
+
+      window.addEventListener('resize', resize)
+
+      return () => window.removeEventListener('resize', resize)
+    }
+    //eslint-disable-next-line
+  }, [isWindow])
+
+  return windowWidth <= mobileWidth
+}

app/routes/tags.$.tsx

@@ -5,7 +5,7 @@ import ListTable from '~/components/Table'
 import {loader} from '~/routes/tags.all'
 import {CategoriesNav} from '~/components/CategoriesNav/Menu'
 import type {Tag as TagType} from '~/server-utils/stampy'
-
+import isMobile from '~/hooks/isMobile'
 export {loader}
 
 export const sortFuncs = {
@@ -15,6 +15,7 @@ export const sortFuncs = {
 }
 
 export default function Tags() {
+  const mobile = isMobile()
   const {data} = useLoaderData<ReturnType<typeof loader>>()
   const {currentTag, tags} = data
   const [selectedTag, setSelectedTag] = useState<TagType | null>(null)
@@ -29,16 +30,18 @@ export default function Tags() {
   if (selectedTag === null) {
     return null
   }
+  const isTagsPage = window.location.pathname.split('/').slice(-2)[0] === 'tags'
   return (
     <Page>
       <main>
         <div className="article-container">
-          <CategoriesNav
-            categories={tags.filter((tag) => tag.questions.length > 0).sort(sortFuncs[sortBy])}
-            activeCategoryId={selectedTag.tagId}
-          />
-
-          {selectedTag === null ? null : (
+          {mobile && !isTagsPage ? null : (
+            <CategoriesNav
+              categories={tags.filter((tag) => tag.questions.length > 0).sort(sortFuncs[sortBy])}
+              activeCategoryId={selectedTag.tagId}
+            />
+          )}
+          {(mobile && isTagsPage) || selectedTag === null ? null : (
             <article>
               <h1 className="padding-bottom-40">{selectedTag.name}</h1>
               <div className="padding-bottom-24">