feat: Add mobile nav for faq

aXenDeveloper · aXenDeveloper · commit 792e29e92308 · 2023-08-18T22:06:28.000+02:00
diff --git a/app/[locale]/(main)/products/[id]/page.tsx b/app/[locale]/(main)/products/[id]/page.tsx
@@ -2,7 +2,7 @@ import { getTranslator } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 
 import { ProductView } from '@/views/products/[id]/ProductView';
-import { products } from '@/views/products/configProducts';
+import { dataProducts } from '@/views/products/dataProducts';
 
 interface Props {
   params: {
@@ -14,7 +14,7 @@ interface Props {
 export async function generateMetadata({ params: { id, locale } }: Props) {
   const t = await getTranslator(locale, 'nav');
 
-  const findProduct = products.find(product => product.id === id);
+  const findProduct = dataProducts.find(product => product.id === id);
 
   if (findProduct) {
     return {
@@ -28,7 +28,7 @@ export async function generateMetadata({ params: { id, locale } }: Props) {
 }
 
 export default function Page({ params: { id } }: Props) {
-  const findProduct = products.find(product => product.id === id);
+  const findProduct = dataProducts.find(product => product.id === id);
 
   if (!findProduct) {
     notFound();
diff --git a/messages/en.json b/messages/en.json
@@ -136,6 +136,7 @@
   },
   "faq": {
     "collaboration": "Collaboration",
+    "menu": "Menu",
     "pages": {
       "welcome": "Welcome",
       "technology": "Technology & Tools",
diff --git a/messages/pl.json b/messages/pl.json
@@ -136,6 +136,7 @@
   },
   "faq": {
     "collaboration": "Współpraca",
+    "menu": "Menu",
     "pages": {
       "welcome": "Witaj",
       "technology": "Technologie i narzędzia",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "date-fns": "^2.30.0",
     "framer-motion": "^10.16.0",
     "hotkeys-js": "^3.12.0",
-    "next": "^13.4.17",
+    "next": "^13.4.18",
     "next-intl": "^3.0.0-beta.9",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -38,11 +38,11 @@
     "@fluentui/react-icons": "^2.0.211",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@next/bundle-analyzer": "^13.4.17",
-    "@next/mdx": "^13.4.17",
+    "@next/bundle-analyzer": "^13.4.18",
+    "@next/mdx": "^13.4.18",
     "@testing-library/react": "^14.0.0",
     "@types/mdx": "^2.0.6",
-    "@types/node": "^20.5.0",
+    "@types/node": "^20.5.1",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -53,7 +53,7 @@
     "@vitest/ui": "^0.34.2",
     "cross-env": "^7.0.3",
     "eslint": "^8.47.0",
-    "eslint-config-next": "^13.4.17",
+    "eslint-config-next": "^13.4.18",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-sort-destructure-keys": "^1.5.0",
@@ -62,8 +62,8 @@
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "prettier": "^3.0.2",
-    "sass": "^1.65.1",
-    "stylelint": "^15.10.2",
+    "sass": "^1.66.0",
+    "stylelint": "^15.10.3",
     "stylelint-config-clean-order": "^5.2.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^10.0.0",
diff --git a/views/faq/wrapper/WrapperFaq.module.scss b/views/faq/wrapper/WrapperFaq.module.scss
@@ -1,4 +1,10 @@
+@use '@/styles/media' as *;
+
 .wrapper {
+  @include mobile-tablet {
+    flex-direction: column;
+  }
+
   position: relative;
   display: flex;
   gap: 2rem;
diff --git a/views/faq/wrapper/WrapperFaq.tsx b/views/faq/wrapper/WrapperFaq.tsx
@@ -3,6 +3,7 @@ import cx from 'clsx';
 
 import { NavFaq } from './list/NavFaq';
 import style from './WrapperFaq.module.scss';
+import { MobileNavFaq } from './list/mobile/MobileNavFaq';
 
 interface Props {
   children: ReactNode;
@@ -11,6 +12,7 @@ interface Props {
 export const WrapperFaq = ({ children }: Props) => (
   <main className={cx('layout_wrapper', style.wrapper)}>
     <NavFaq />
+    <MobileNavFaq />
     <main className={style.main}>{children}</main>
   </main>
 );
diff --git a/views/faq/wrapper/list/NavFaq.module.scss b/views/faq/wrapper/list/NavFaq.module.scss
@@ -6,7 +6,7 @@
   }
 
   position: sticky;
-  top: var(--header-height);
+  top: calc(var(--header-height) + 2rem);
 
   overflow: hidden;
 
diff --git a/views/faq/wrapper/list/item/ItemNavFaq.module.scss b/views/faq/wrapper/list/item/ItemNavFaq.module.scss
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: space-between;
 
-  margin: 0.25rem 0;
+  padding: 0.25rem 0;
 
   color: rgb(var(--text-secondary-color));
 
diff --git a/views/faq/wrapper/list/mobile/MobileNavFaq.module.scss b/views/faq/wrapper/list/mobile/MobileNavFaq.module.scss
@@ -0,0 +1,49 @@
+@use '@/styles/media' as *;
+
+.main {
+  @include desktop {
+    display: none;
+  }
+
+  padding: 1rem;
+}
+
+.button {
+  cursor: pointer;
+
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.5rem 1.5rem;
+
+  font-family: inherit;
+  font-weight: 500;
+  color: rgb(var(--button-secondary-color));
+  text-align: center;
+
+  background-color: rgb(var(--button-secondary));
+  border: 1px solid rgb(var(--button-secondary-border));
+  border-radius: var(--radius);
+
+  transition:
+    background-color var(--animation),
+    border-color var(--animation),
+    color var(--animation);
+
+  &:hover {
+    color: rgb(var(--button-secondary-hover-color));
+  }
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+}
+
+.list {
+  padding-top: 1rem;
+  list-style: none;
+
+  ul {
+    list-style: none;
+  }
+}
diff --git a/views/faq/wrapper/list/mobile/MobileNavFaq.tsx b/views/faq/wrapper/list/mobile/MobileNavFaq.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+
+import style from './MobileNavFaq.module.scss';
+import { ItemNavFaq } from '../item/ItemNavFaq';
+import styleMain from '../NavFaq.module.scss';
+
+import { faqData } from '../../../faqData';
+
+export const MobileNavFaq = () => {
+  const t = useTranslations('faq');
+  const [isOpen, setOpen] = useState(false);
+
+  return (
+    <div className={style.main}>
+      <button className={style.button} onClick={() => setOpen(prev => !prev)}>
+        {t('menu')}
+      </button>
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            key="content"
+            initial="collapsed"
+            animate="open"
+            exit="collapsed"
+            variants={{
+              open: { opacity: 1, height: 'auto' },
+              collapsed: { opacity: 0, height: 0 }
+            }}
+          >
+            <ul className={style.list}>
+              {faqData.map(category => (
+                <li className={styleMain.category} key={category.id}>
+                  {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                  {/* @ts-expect-error */}
+                  {category.id !== 'global' && <span>{t(category.id)}</span>}
+
+                  <ul>
+                    {category.items.map(item => (
+                      <ItemNavFaq key={item.id} {...item} />
+                    ))}
+                  </ul>
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
diff --git a/views/home/sections/lastProducts/LastProductsHomeSection.tsx b/views/home/sections/lastProducts/LastProductsHomeSection.tsx
@@ -3,7 +3,7 @@ import { useTranslations } from 'next-intl';
 import style from './LastProductsHomeSection.module.scss';
 import { Button } from '@/components/button/Button';
 
-import { CategoriesProductEnum, products } from '../../../products/configProducts';
+import { CategoriesProductEnum, dataProducts } from '../../../products/dataProducts';
 import { ItemProducts } from '../../../products/item/ItemProducts';
 
 export const LastProductsHomeSection = () => {
@@ -19,7 +19,7 @@ export const LastProductsHomeSection = () => {
       </div>
 
       <div className={style.list}>
-        {products
+        {dataProducts
           .filter(item => !item.categories.includes(CategoriesProductEnum.IPS_TRANSLATIONS))
           .sort((a, b) => b.createdAt - a.createdAt)
           .slice(0, 4)
diff --git a/views/home/sections/reviews/item/ItemReviewsHomeSection.tsx b/views/home/sections/reviews/item/ItemReviewsHomeSection.tsx
@@ -3,7 +3,7 @@ import { useTranslations } from 'next-intl';
 
 import style from './ItemReviewsHomeSection.module.scss';
 
-import { products } from '../../../../products/configProducts';
+import { dataProducts } from '../../../../products/dataProducts';
 
 interface Props {
   from: {
@@ -18,7 +18,7 @@ interface Props {
 export const ItemReviewsHomeSection = ({ from, id, name, productId }: Props) => {
   const t = useTranslations('home');
 
-  const product = products.find(product => product.id === productId);
+  const product = dataProducts.find(product => product.id === productId);
   if (!product) return null;
 
   return (
diff --git a/views/products/ProductsView.tsx b/views/products/ProductsView.tsx
@@ -5,15 +5,15 @@ import { useMemo } from 'react';
 import { useSearchParams } from 'next/navigation';
 
 import style from './ProductsView.module.scss';
-import { CategoriesProductEnum, products } from './configProducts';
+import { CategoriesProductEnum, dataProducts } from './dataProducts';
 import { ItemProducts } from './item/ItemProducts';
 
 export const ProductsView = () => {
   const searchParams = useSearchParams();
   const filters = searchParams.getAll('filter');
 
   const data = useMemo(() => {
-    return products
+    return dataProducts
       .filter(item => {
         if (filters.length <= 0)
           return !item.categories.includes(CategoriesProductEnum.IPS_TRANSLATIONS);
diff --git a/views/products/[id]/ProductView.tsx b/views/products/[id]/ProductView.tsx
@@ -1,7 +1,7 @@
 import cx from 'clsx';
 import { useTranslations } from 'next-intl';
 
-import { ProductsInterface } from '../configProducts';
+import { ProductsInterface } from '../dataProducts';
 import style from './ProductView.module.scss';
 import { BackLinkProduct } from './backLink/BackLinkProduct';
 import { SwiperProduct } from './swiper/SwiperProduct';
diff --git a/views/products/[id]/details/DetailsProduct.tsx b/views/products/[id]/details/DetailsProduct.tsx
@@ -3,7 +3,7 @@ import { useTranslations } from 'next-intl';
 import style from './DetailsProduct.module.scss';
 import { DateFormat } from '@/components/dateFormat/DateFormat';
 
-import { ProductsInterface } from '../../configProducts';
+import { ProductsInterface } from '../../dataProducts';
 
 export const DetailsProduct = ({
   categories,
diff --git a/views/products/[id]/links/LinksProduct.tsx b/views/products/[id]/links/LinksProduct.tsx
@@ -6,7 +6,7 @@ import { ShoppingBag24Filled } from '@fluentui/react-icons';
 import style from './LinksProduct.module.scss';
 import { Button } from '@/components/button/Button';
 
-import { LinksProductsInterface } from '../../configProducts';
+import { LinksProductsInterface } from '../../dataProducts';
 
 interface Props {
   links: LinksProductsInterface;
diff --git a/views/products/dataProducts.ts b/views/products/dataProducts.ts
@@ -27,7 +27,7 @@ export interface ProductsInterface {
   single?: boolean;
 }
 
-export const products: ProductsInterface[] = [
+export const dataProducts: ProductsInterface[] = [
   {
     id: 'ips-secondary-groups-indicator',
     name: 'Secondary Groups Indicator',
@@ -510,8 +510,8 @@ export const products: ProductsInterface[] = [
     name: 'Player Panel',
     categories: [CategoriesProductEnum.IPS_APPS],
     images: [
-      'https://files.axendev.net/projects/ips/applications/playerpanel/1.png',
       'https://files.axendev.net/projects/ips/applications/playerpanel/2.png',
+      'https://files.axendev.net/projects/ips/applications/playerpanel/1.png',
       'https://files.axendev.net/projects/ips/applications/playerpanel/3.png',
       'https://files.axendev.net/projects/ips/applications/playerpanel/4.png',
       'https://files.axendev.net/projects/ips/applications/playerpanel/5.png',
diff --git a/views/products/filters/FiltersProducts.tsx b/views/products/filters/FiltersProducts.tsx
@@ -1,7 +1,7 @@
 import { useTranslations } from 'next-intl';
 
 import style from './FiltersProducts.module.scss';
-import { CategoriesProductEnum } from '../configProducts';
+import { CategoriesProductEnum } from '../dataProducts';
 import { ItemFiltersProducts } from './item/ItemFiltersProducts';
 
 export const FiltersProducts = () => {
diff --git a/views/products/filters/mobile/MobileFiltersProducts.tsx b/views/products/filters/mobile/MobileFiltersProducts.tsx
@@ -9,7 +9,7 @@ import { ItemFiltersProducts } from '../item/ItemFiltersProducts';
 import style from './MobileFiltersProducts.module.scss';
 import styleMain from '../FiltersProducts.module.scss';
 
-import { CategoriesProductEnum } from '../../configProducts';
+import { CategoriesProductEnum } from '../../dataProducts';
 
 export const MobileFiltersProducts = () => {
   const t = useTranslations('products');
diff --git a/views/products/item/ItemProducts.tsx b/views/products/item/ItemProducts.tsx
@@ -3,7 +3,7 @@ import Link from 'next-intl/link';
 import { useTranslations } from 'next-intl';
 import cx from 'clsx';
 
-import { ProductsInterface } from '../configProducts';
+import { ProductsInterface } from '../dataProducts';
 import style from './ItemProducts.module.scss';
 import { Img } from '@/components/img/Img';
 import { Badge } from '@/components/badge/Badge';

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`position: sticky;`
`9`		`- top: var(--header-height);`
	`9`	`+ top: calc(var(--header-height) + 2rem);`
`10`	`10`
`11`	`11`	`overflow: hidden;`
`12`	`12`