feat(fe): genres list menu

pkg/frontend/src/components/nav.js

@@ -18,12 +18,14 @@ import inp from '../styles/components/input.module.scss';
 // import { useRouter } from 'next/router';
 import styles from '../styles/components/nav.module.scss';
 import typo from '../styles/components/typography.module.scss';
+import NavGenres from './navGenres';
 
 export default function Nav(props) {
   const [searchQuery, setSearchQuery] = useState('');
   const [showSearch, setShowSearch] = useState(false);
   const [mobile, setMobile] = useState(false);
   const [darken, setDarken] = useState(false);
+  const [genresOpen, setGenresOpen] = useState(false);
 
   const history = useHistory();
   const inputRef = useRef();
@@ -49,6 +51,10 @@ export default function Nav(props) {
     };
   }, []);
 
+  useEffect(() => {
+    setGenresOpen(false);
+  }, [history.location]);
+
   function updateSearch(e) {
     const val = e.target.value;
     media.searchUpdate(val);
@@ -88,7 +94,9 @@ export default function Nav(props) {
       <div
         className={`${styles.nav} ${
           showSearch ? styles.nav__search_open : ''
-        } ${darken ? styles.nav__darken : ''}`}
+        } ${darken ? styles.nav__darken : ''} ${
+          genresOpen ? styles.nav__block : ''
+        }`}
       >
         <div className="container">
           <div className={styles.nav__inner}>
@@ -109,20 +117,36 @@ export default function Nav(props) {
                 <Link
                   to="/"
                   onClick={() => resetScrollPos('/')}
-                  className={`${typo.body} ${typo.bold}`}
+                  className={`${typo.body} ${typo.bold} ${styles.nav__item}`}
                 >
                   Movies &amp; TV
                 </Link>
-                <button className={`${typo.body} ${typo.bold}`}>Genres</button>
-                <Link to="/requests" className={`${typo.body} ${typo.bold}`}>
+                <button
+                  className={`${typo.body} ${typo.bold} ${styles.nav__item} ${
+                    genresOpen ? styles.nav__item__active : ''
+                  }`}
+                  onClick={() => setGenresOpen(!genresOpen)}
+                >
+                  Genres
+                </button>
+                <Link
+                  to="/requests"
+                  className={`${typo.body} ${typo.bold} ${styles.nav__item}`}
+                >
                   Requests
                 </Link>
-                <Link to="/my-account" className={`${typo.body} ${typo.bold}`}>
+                <Link
+                  to="/my-account"
+                  className={`${typo.body} ${typo.bold} ${styles.nav__item}`}
+                >
                   My Account
                 </Link>
                 {props.currentUser.role === 'admin' ||
                 props.currentUser.role === 'moderator' ? (
-                  <Link to="/admin" className={`${typo.body} ${typo.bold}`}>
+                  <Link
+                    to="/admin"
+                    className={`${typo.body} ${typo.bold} ${styles.nav__item}`}
+                  >
                     Admin
                   </Link>
                 ) : null}
@@ -169,7 +193,7 @@ export default function Nav(props) {
             to="/"
             onClick={() => resetScrollPos('/')}
             className={`${typo.xsmall} ${styles.mobile_nav__item} ${
-              history.location.pathname === '/'
+              history.location.pathname === '/' && !genresOpen
                 ? styles.mobile_nav__item__active
                 : ''
             }`}
@@ -179,7 +203,12 @@ export default function Nav(props) {
             </span>
             Movies &amp; TV
           </Link>
-          <button className={`${typo.xsmall} ${styles.mobile_nav__item}`}>
+          <button
+            className={`${typo.xsmall} ${styles.mobile_nav__item} ${
+              genresOpen ? styles.mobile_nav__item__active : ''
+            }`}
+            onClick={() => setGenresOpen(!genresOpen)}
+          >
             <span>
               <GenreIcon />
             </span>
@@ -188,7 +217,7 @@ export default function Nav(props) {
           <Link
             to="/requests"
             className={`${typo.xsmall} ${styles.mobile_nav__item} ${
-              history.location.pathname === '/requests'
+              history.location.pathname === '/requests' && !genresOpen
                 ? styles.mobile_nav__item__active
                 : ''
             }`}
@@ -201,7 +230,7 @@ export default function Nav(props) {
           <Link
             to="/my-account"
             className={`${typo.xsmall} ${styles.mobile_nav__item} ${
-              history.location.pathname === '/my-account'
+              history.location.pathname === '/my-account' && !genresOpen
                 ? styles.mobile_nav__item__active
                 : ''
             }`}
@@ -216,7 +245,7 @@ export default function Nav(props) {
             <Link
               to="/admin"
               className={`${typo.xsmall} ${styles.mobile_nav__item} ${
-                history.location.pathname === '/admin'
+                history.location.pathname === '/admin' && !genresOpen
                   ? styles.mobile_nav__item__active
                   : ''
               }`}
@@ -229,6 +258,7 @@ export default function Nav(props) {
           ) : null}
         </div>
       ) : null}
+      <NavGenres open={genresOpen} />
     </>
   );
 }

pkg/frontend/src/components/navGenres.js

@@ -0,0 +1,73 @@
+import { Link } from 'react-router-dom';
+
+import { getGenres } from '../helpers/genres';
+import styles from '../styles/components/nav.module.scss';
+import typo from '../styles/components/typography.module.scss';
+
+export default function NavGenres({ open }) {
+  const movieGenres = getGenres('movie');
+  const tvGenres = getGenres('tv');
+  let movieGenresSorted = {};
+  Object.keys(movieGenres).forEach((id) => {
+    movieGenresSorted[movieGenres[id]] = id;
+  });
+  let tvGenresSorted = {};
+  Object.keys(tvGenres).forEach((id) => {
+    tvGenresSorted[tvGenres[id]] = id;
+  });
+
+  if (!open) return null;
+
+  return (
+    <div className={`${styles.genre_menu}`}>
+      <div className={styles.genre_menu__inner}>
+        <div className="container">
+          <div className={styles.genre_menu__content}>
+            <div className={styles.genre_menu__col}>
+              <p className={`${typo.body} ${typo.uppercase} ${typo.bold}`}>
+                Movie Genres
+              </p>
+              <div className={styles.genre_menu__links}>
+                {Object.keys(movieGenresSorted)
+                  .sort()
+                  .map((name) => {
+                    return (
+                      <p
+                        key={`footer_movie_genre_${name}`}
+                        className={`${typo.body}`}
+                      >
+                        <Link to={`/movie/genre/${movieGenresSorted[name]}`}>
+                          {name}
+                        </Link>
+                      </p>
+                    );
+                  })}
+              </div>
+            </div>
+            <div className={styles.genre_menu__col}>
+              <p className={`${typo.body} ${typo.uppercase} ${typo.bold}`}>
+                TV Genres
+              </p>
+              <div className={styles.genre_menu__links}>
+                {Object.keys(tvGenresSorted)
+                  .sort()
+                  .map((name) => {
+                    return (
+                      <p
+                        key={`footer_tv_genre_${name}`}
+                        className={`${typo.body}`}
+                      >
+                        <Link to={`/tv/genre/${tvGenresSorted[name]}`}>
+                          {name}
+                        </Link>
+                      </p>
+                    );
+                  })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

pkg/frontend/src/pages/index.js

@@ -10,7 +10,8 @@ import { Loading } from '../components/loading';
 import Meta from '../components/meta';
 import media from '../services/media.service';
 import hero from '../styles/components/hero.module.scss';
-import typo from '../styles/components/typography.module.scss';
+
+// import typo from '../styles/components/typography.module.scss';
 
 const mapStateToProps = (state) => {
   return {
@@ -93,9 +94,9 @@ function Home({
         <div className={hero.discovery}>
           <div className="container">
             <div className={hero.discovery__content}>
-              {redux_featured ? (
+              {/* {redux_featured ? (
                 <p className={typo.featured_title}>Featured Movie</p>
-              ) : null}
+              ) : null} */}
               {redux_featured ? (
                 <Link
                   to={`/movie/${redux_featured.id}`}