directory changes • working on the nav mobile modal

libs/features/src/lib/cart/cart.modal/cart.modal.module.css

@@ -1,6 +1,4 @@
 .modal {
-  width: 390px;
-  max-width: 390px;
   position: relative;
   display: flex;
   flex-direction: column;

libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx

@@ -28,10 +28,6 @@ const SwitchTheme = ({ className }: SwitchProps): ReactElement => {
     const el = document.querySelector('html');
 
     el?.classList.add(theme);
-
-    return () => {
-      el?.classList.remove(theme);
-    };
   }, [theme]);
 
   return (

libs/features/src/lib/navigation/header/header.tsx

@@ -18,6 +18,7 @@ import { noopUtil } from '@pokemon-pet-shop/utils';
 
 import { UiCartModal } from '../../cart';
 import { UiSwitchTheme } from '../component/switch.theme';
+import { UiNavMobileModal } from '../nav.mobile';
 
 import { styles } from './header.module';
 
@@ -43,13 +44,31 @@ const Header = () => {
     });
   };
 
+  const handleMobileNavModalClick = () => {
+    openModal({
+      content: <UiNavMobileModal />,
+      options: {
+        title: 'Menu',
+        headlineType: ModalHeadlineTypeEnum.RELATIVE,
+        modalAlignment: AlignmentEnum.LEFT,
+      },
+      onCallback: () => {
+        noopUtil();
+      },
+    });
+  };
+
   return (
     <UiElementLayout layoutType={ElementLayoutTypeEnum.HEADER} className={styles.headerWrapper}>
       <UiContainer className={styles.container}>
         <UiHideInMobile>
           <UiImage src={pokeshopLogo} className={styles.logo} width="160" />
         </UiHideInMobile>
-        <UiIcon classNameIcon={styles.iconMenu} icon={IconTypeEnum.ICON_MENU} />
+        <UiIcon
+          classNameIcon={styles.iconMenu}
+          icon={IconTypeEnum.ICON_MENU}
+          onClick={handleMobileNavModalClick}
+        />
 
         <UiElementLayout layoutType={ElementLayoutTypeEnum.NAV} className={styles.nav}>
           <UiTypography typographyType={TypographyTypeEnum.SPAN} className={styles.navTitle}>
@@ -60,7 +79,6 @@ const Header = () => {
 
         <UiHideInMobile>
           <UiSwitchTheme className={styles.switchTheme} />
-          <UiSwitchTheme className={styles.switchTheme} />
         </UiHideInMobile>
 
         <UiElementLayout onClick={handleOpenDetailModalClick}>

libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.css

@@ -1,25 +1,20 @@
 .modal {
-  width: 500px;
-  background: white;
-}
-
-.dropdownTop {
-  padding: 15px;
-  height: calc(100% - 90px);
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 65px);
 }
 
-.dropdownHeadline {
+.navWrapper {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  flex: 1;
+  flex-direction: column;
+  margin: 0 15px 15px;
 }
 
-.dropdownBtm {
-  height: 90px;
-  border-radius: 0 0 8px 8px;
+.switchWrapper {
   display: flex;
-  flex-direction: row;
   justify-content: center;
-  align-items: center;
-  padding: 15px;
 }

libs/features/src/lib/navigation/nav.mobile/nav.mobile.tsx

@@ -1,30 +1,24 @@
 import { ReactElement } from 'react';
 
-import { AlignmentEnum } from '@pokemon-pet-shop/typing';
-import { UiElementLayout, UiIcon, IconTypeEnum, UiTypography, UiModal } from '@pokemon-pet-shop/ui';
+import { UiElementLayout, UiTypography } from '@pokemon-pet-shop/ui';
 
 import { UiSwitchTheme } from '../component/switch.theme';
 
-import { NavMobileModalProps } from './nav.mobile.interface';
 import styles from './nav.mobile.module.css';
 
-const NavMobileModal = ({ isModalShown = false }: NavMobileModalProps): ReactElement => {
+const NavMobileModal = (): ReactElement => {
   return (
-    <UiModal
-      isModalShown={isModalShown}
-      classNameModal={styles.modal}
-      modalAlignment={AlignmentEnum.LEFT}
-    >
-      <UiElementLayout className={styles.dropdownTop}>
-        <UiElementLayout className={styles.dropdownHeadline}>
-          <UiTypography>Menu</UiTypography>
-          <UiIcon icon={IconTypeEnum.ICON_X} />
+    <UiElementLayout className={styles.modal}>
+      <UiElementLayout className={styles.navWrapper}>
+        <UiElementLayout className={styles.linkWrapper}>
+          <UiTypography>PETS</UiTypography>
+        </UiElementLayout>
+
+        <UiElementLayout className={styles.switchWrapper}>
+          <UiSwitchTheme />
         </UiElementLayout>
       </UiElementLayout>
-      <UiElementLayout className={styles.dropdownBtm}>
-        <UiSwitchTheme className={styles.switchTheme} />
-      </UiElementLayout>
-    </UiModal>
+    </UiElementLayout>
   );
 };
 

libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.module.css

@@ -1,6 +1,4 @@
 .modal {
-  width: 550px;
-  max-width: 550px;
   position: relative;
 }
 

libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx

@@ -1,6 +1,5 @@
 import { ReactElement } from 'react';
 
-import { halfCircle } from '@pokemon-pet-shop/assets';
 import { useModalStore } from '@pokemon-pet-shop/store';
 import {
   PokemonDetailAbilityObj,
@@ -23,6 +22,7 @@ import { ReactSVG } from 'react-svg';
 import { UiPokemonAbilityName } from '../components/pokemon.ability.name';
 import { usePokemonTheme } from '../hooks/use.pokemon.theme.logic';
 
+import halfCircle from './assets/half.circle.svg';
 import styles from './pokemon.detail.modal.module.css';
 import usePokemonDetailModalLogic from './use.pokemon.detail.modal.logic';
 

libs/ui/src/lib-base/ui/icon.poke.type/icon.poke.type.util.ts

@@ -1,23 +1,42 @@
-import {
-  bugIcon,
-  darkIcon,
-  dragonIcon,
-  electricIcon,
-  fairyIcon,
-  fightingIcon,
-  fireIcon,
-  flyingIcon,
-  ghostIcon,
-  grassIcon,
-  groundIcon,
-  iceIcon,
-  normalIcon,
-  poisonIcon,
-  psychicIcon,
-  rockIcon,
-  steelIcon,
-  waterIcon,
-} from '@pokemon-pet-shop/assets';
+// import {
+//   bugIcon,
+//   darkIcon,
+//   dragonIcon,
+//   electricIcon,
+//   fairyIcon,
+//   fightingIcon,
+//   fireIcon,
+//   flyingIcon,
+//   ghostIcon,
+//   grassIcon,
+//   groundIcon,
+//   iceIcon,
+//   normalIcon,
+//   poisonIcon,
+//   psychicIcon,
+//   rockIcon,
+//   steelIcon,
+//   waterIcon,
+// } from '@pokemon-pet-shop/assets';
+
+import bugIcon from './assets/bug.svg';
+import darkIcon from './assets/dark.svg';
+import dragonIcon from './assets/dragon.svg';
+import electricIcon from './assets/electric.svg';
+import fairyIcon from './assets/fairy.svg';
+import fightingIcon from './assets/fighting.svg';
+import fireIcon from './assets/fire.svg';
+import flyingIcon from './assets/flying.svg';
+import ghostIcon from './assets/ghost.svg';
+import grassIcon from './assets/grass.svg';
+import groundIcon from './assets/ground.svg';
+import iceIcon from './assets/ice.svg';
+import normalIcon from './assets/normal.svg';
+import poisonIcon from './assets/poison.svg';
+import psychicIcon from './assets/psychic.svg';
+import rockIcon from './assets/rock.svg';
+import steelIcon from './assets/steel.svg';
+import waterIcon from './assets/water.svg';
 
 export const iconPokeSvgMap = {
   bugIcon,

libs/ui/src/lib-base/ui/modal/modal.module.css

@@ -11,8 +11,8 @@
 }
 
 .modal {
+  width: 100%;
   height: 100%;
-  max-width: 600px;
   background: white;
   position: relative;
 }
@@ -47,3 +47,9 @@
   width: 100%;
   z-index: 10;
 }
+
+@media only screen and (min-width: 768px) {
+  .modal {
+    max-width: 600px;
+  }
+}