+
= ({
alt={chartTitle ?? 'chart'}
width={512}
height={455}
+ className={styles.chart}
/>
) : null}
diff --git a/src/components/longevity/MobileNavigation/MobileNavigation.module.scss b/src/components/longevity/MobileNavigation/MobileNavigation.module.scss
new file mode 100644
index 0000000..5d8dc55
--- /dev/null
+++ b/src/components/longevity/MobileNavigation/MobileNavigation.module.scss
@@ -0,0 +1,223 @@
+@import '@styles/_animations.scss';
+
+.nav {
+ margin: 20px 16px;
+
+ .activePage {
+ cursor: pointer;
+ background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png');
+ color: #ffffff;
+ border: unset;
+ padding: 13px 16px;
+ width: 100%;
+ background-repeat: no-repeat;
+ background-size: cover;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .navList {
+ transform: translateY(-10px);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ position: absolute;
+ display: none;
+ z-index: 888;
+ transition:
+ transform 220ms ease,
+ opacity 220ms ease,
+ visibility 0ms linear 220ms;
+ will-change: transform, opacity;
+ background-color: #fff;
+ width: 93%;
+ list-style: none;
+ padding: 0;
+ margin: 8px 0 0 0;
+
+ .li,
+ .subNav {
+ .link {
+ color: #000000a6;
+ text-decoration: none;
+ display: flex;
+ }
+
+ .habitsArrow {
+ animation: rotateArrowDown 220ms ease forwards;
+
+ path {
+ fill: #000000a6;
+ }
+ }
+
+ .openHabitsArrow {
+ animation: rotateArrowUp 220ms ease forwards;
+ }
+ }
+
+ .li {
+ display: flex;
+ align-items: flex-start;
+ padding: 13px 16px;
+ gap: 8px;
+ position: relative;
+ justify-content: space-between;
+
+ .divider {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ max-width: 310px;
+ }
+
+ .icon {
+ svg {
+ width: 20px;
+ height: 20px;
+ }
+ }
+ }
+
+ .li.active {
+ display: block;
+
+ .link {
+ color: #000;
+ font-weight: 500;
+ }
+ }
+
+ .habitsLi {
+ flex-direction: column;
+ align-items: baseline;
+ }
+
+ .subNav {
+ transform: translateY(-10px);
+ opacity: 0;
+ display: none;
+ visibility: hidden;
+ pointer-events: none;
+ z-index: 888;
+ transition:
+ transform 220ms ease,
+ opacity 220ms ease,
+ visibility 0ms linear 220ms;
+ will-change: transform, opacity;
+ background-color: #fff;
+ display: none;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .subLi {
+ display: flex;
+ gap: 13px;
+ align-items: center;
+ padding-bottom: 13px;
+ padding-top: 13px;
+
+ .icon {
+ svg {
+ width: 28px;
+ height: 20px;
+ }
+ }
+ }
+
+ // TODO: Not working as expected, need to check
+ .subNav.openSubNav {
+ transform: translateY(0);
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+ display: block;
+ transition:
+ transform 220ms ease,
+ opacity 220ms ease,
+ visibility 0ms;
+ }
+ }
+
+ .navList.open {
+ transform: translateY(0);
+ opacity: 1;
+ visibility: visible;
+ display: block;
+ pointer-events: auto;
+ transition:
+ transform 220ms ease,
+ opacity 220ms ease,
+ visibility 0ms;
+ }
+
+ .txtAndIcon {
+ display: flex;
+ gap: 8px;
+ }
+
+ .habitsTxtAndIcon {
+ display: flex;
+ gap: 8px;
+ width: 100%;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .contentsTxt {
+ display: block;
+ }
+
+ .disableContentsTxt {
+ @extend .animate-fadeOut;
+ animation-duration: 0.1s;
+ }
+
+ .arrow {
+ animation: rotateArrowDown 220ms ease forwards;
+ }
+
+ .openArrow {
+ animation: rotateArrowUp 220ms ease forwards;
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ .navList,
+ .navList.open,
+ .subNav,
+ .openSubNav {
+ transition: none;
+ transform: none;
+ }
+ }
+}
+
+.nextPageBtn {
+ //background-image: url('/keepsimple_/assets/longevity/navbar-borders.svg');
+ background-size: cover;
+ border: 1px solid #000;
+ margin: 20px 16px;
+ padding: 13px 16px;
+}
+
+@keyframes rotateArrowUp {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(-90deg);
+ }
+}
+
+@keyframes rotateArrowDown {
+ from {
+ transform: rotate(-90deg);
+ }
+ to {
+ transform: rotate(0deg);
+ }
+}
diff --git a/src/components/longevity/MobileNavigation/MobileNavigation.tsx b/src/components/longevity/MobileNavigation/MobileNavigation.tsx
new file mode 100644
index 0000000..e566f88
--- /dev/null
+++ b/src/components/longevity/MobileNavigation/MobileNavigation.tsx
@@ -0,0 +1,210 @@
+import { FC, useState } from 'react';
+import Link from 'next/link';
+
+import { useRouter } from 'next/router';
+import cn from 'classnames';
+
+import { LifestyleIcon } from '@icons/longevity/LifestyleIcon';
+import { StudyIcon } from '@icons/longevity/StudyIcon';
+import { DietIcon } from '@icons/longevity/DietIcon';
+import { WorkoutIcon } from '@icons/longevity/WorkoutIcon';
+import { SleepIcon } from '@icons/longevity/SleepIcon';
+import { SupplementsIcon } from '@icons/longevity/SupplementsIcon';
+import { TomIcon } from '@icons/longevity/TomIcon';
+import NewPageIcon from '@icons/longevity/NewPageIocn';
+
+import styles from './MobileNavigation.module.scss';
+import NavigationIcon from '@icons/longevity/NavigationIcon';
+import Divider from '@icons/longevity/Divider';
+import { useClickOutside } from '@lib/useClickOutside';
+
+const MobileNavigation: FC = () => {
+ const router = useRouter();
+ const [openNav, setOpenNav] = useState(false);
+ const [openSubNav, setOpenSubNav] = useState(false);
+
+ const toggleNavbar = () => {
+ setOpenNav(false);
+ };
+
+ const ref = useClickOutside(toggleNavbar);
+
+ // TODO: Move nav items
+ const navItems = [
+ { name: 'About Project', path: '/tools/longevity-protocol/about-project' },
+ {
+ name: 'Habits',
+ path: '/tools/longevity-protocol/habits/lifestyle',
+ hasNoUrl: true,
+ },
+ {
+ name: 'Environment',
+ path: '/tools/longevity-protocol/environment',
+ },
+ { name: 'Results', path: '/tools/longevity-protocol/results' },
+ {
+ name: 'AI Assistant',
+ path: 'https://chatgpt.com/g/g-6952e0caa7c88191b1ba18e63b36dd69-tom-longevity-and-food-guide-by-keepsimple-io',
+ icon:
,
+ },
+ ];
+
+ // TODO: Move sub nav items
+ const subNavItems = [
+ {
+ name: 'Habits - Lifestyle',
+ path: '/tools/longevity-protocol/habits/lifestyle',
+ icon:
,
+ },
+ {
+ name: 'Habits - Study',
+ path: '/tools/longevity-protocol/habits/study',
+ icon:
,
+ },
+ {
+ name: 'Habits - Diet',
+ path: '/tools/longevity-protocol/habits/diet',
+ icon:
,
+ },
+ {
+ name: 'Habits - Workout',
+ path: '/tools/longevity-protocol/habits/workout',
+ icon:
,
+ },
+ {
+ name: 'Habits - Sleep',
+ path: '/tools/longevity-protocol/habits/sleep',
+ icon:
,
+ },
+ {
+ name: 'Habits - Supplements',
+ path: '/tools/longevity-protocol/habits/supplements',
+ icon:
,
+ },
+ ];
+ const getActiveNavItemName = (nav1, nav2) => {
+ const active =
+ nav1.find(i => i.path === router.pathname) ??
+ nav2.find(i => i.path === router.pathname);
+
+ return active?.name ?? '';
+ };
+ // TODO - Get back to this
+ // const getNextNavItemName = (nav1, nav2) => {
+ // const allNavItems = [...nav1, ...nav2];
+ // const currentIndex = allNavItems.findIndex(i => i.path === router.pathname);
+ // const nextItem = allNavItems[currentIndex + 1];
+ //
+ // if (currentIndex === -1) return '';
+ // if (currentIndex === allNavItems.length - 1) {
+ // return allNavItems[0].name;
+ // }
+ // return nextItem ? nextItem.name : '';
+ // };
+ // const nextPathname = getNextNavItemName(navItems, subNavItems);
+
+ return (
+ <>
+
+ {/*
*/}
+
+ );
+};
+
+export default MobileNavigation;
diff --git a/src/components/longevity/MobileNavigation/MobileNavigation.types.ts b/src/components/longevity/MobileNavigation/MobileNavigation.types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/longevity/MobileNavigation/index.ts b/src/components/longevity/MobileNavigation/index.ts
new file mode 100644
index 0000000..56ea200
--- /dev/null
+++ b/src/components/longevity/MobileNavigation/index.ts
@@ -0,0 +1,3 @@
+import MobileNavigation from './MobileNavigation';
+
+export default MobileNavigation;
diff --git a/src/components/longevity/Navigation/Navigation.module.scss b/src/components/longevity/Navigation/Navigation.module.scss
index 6276c5c..1460103 100644
--- a/src/components/longevity/Navigation/Navigation.module.scss
+++ b/src/components/longevity/Navigation/Navigation.module.scss
@@ -12,8 +12,8 @@
background-image: url('/keepsimple_/assets/longevity/nav-bg.svg');
background-repeat: no-repeat;
background-size: cover;
- width: 221px;
- height: 48px;
+ width: 220px;
+ height: 49px;
text-align: center;
display: flex;
align-items: center;
@@ -22,20 +22,8 @@
&:hover {
cursor: pointer;
- background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png');
-
- .link,
- .subLink {
- color: #ffffff;
- }
- }
-
- &:hover {
- svg {
- path {
- fill: #2f2f2f;
- }
- }
+ background-image: url('/keepsimple_/assets/longevity/navbar-borders.svg');
+ background-color: #fff;
}
}
@@ -73,6 +61,11 @@
}
}
}
+
+ &:hover {
+ cursor: pointer;
+ background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png');
+ }
}
.subItemActive {
@@ -131,7 +124,7 @@
svg {
path {
- fill: #000;
+ fill: #bdbdbd;
}
}
}
@@ -155,3 +148,15 @@
margin-bottom: 0;
margin-top: 0;
}
+
+@media (max-width: 1170px) {
+ .nav {
+ margin: 0 15px;
+ }
+}
+
+//@media(max-width: 950px) {
+// .nav {
+// display: none;
+// }
+//}
diff --git a/src/components/longevity/Navigation/Navigation.tsx b/src/components/longevity/Navigation/Navigation.tsx
index 7ea3b75..bafd7ed 100644
--- a/src/components/longevity/Navigation/Navigation.tsx
+++ b/src/components/longevity/Navigation/Navigation.tsx
@@ -1,10 +1,10 @@
import { FC } from 'react';
import Link from 'next/link';
-import styles from './Navigation.module.scss';
import { useRouter } from 'next/router';
import Image from 'next/image';
import cn from 'classnames';
+
import { LifestyleIcon } from '@icons/longevity/LifestyleIcon';
import { StudyIcon } from '@icons/longevity/StudyIcon';
import { DietIcon } from '@icons/longevity/DietIcon';
@@ -14,12 +14,14 @@ import { SupplementsIcon } from '@icons/longevity/SupplementsIcon';
import { TomIcon } from '@icons/longevity/TomIcon';
import NewPageIcon from '@icons/longevity/NewPageIocn';
+import styles from './Navigation.module.scss';
+
const Navigation: FC = () => {
const router = useRouter();
// TODO: Move nav items
const navItems = [
- { name: 'About Project', path: '/tools/longevity-protocol/what-is-this' },
+ { name: 'About Project', path: '/tools/longevity-protocol/about-project' },
{
name: 'Habits',
path: '/tools/longevity-protocol/habits/lifestyle',
@@ -72,7 +74,7 @@ const Navigation: FC = () => {
];
return (
-