Merge pull request #25 from keepsimpleio/chore/longevity-minor-improvements

Chore/longevity minor improvements

Author: MaryWylde

public/keepsimple_/assets/longevity/og.png

@@ -59,6 +59,7 @@ const Navbar: FC<NavbarProps> = ({ handleToggleSidebar, handleClick }) => {
       logo: isDarkTheme ? <ToolsIcon /> : <ToolsDarkIcon />,
       target: '',
       id: 'tools',
+      activeMatch: '/tools/longevity-protocol',
     },
     {
       name: articles,
@@ -81,31 +82,38 @@ const Navbar: FC<NavbarProps> = ({ handleToggleSidebar, handleClick }) => {
           [styles.authorized]: !!accountData,
         })}
       >
-        {routes.map(({ name, path, target, logo, id }, index) => (
-          <a
-            key={index}
-            href={path}
-            target={target}
-            onClick={e => {
-              if (target === '_blank') return;
-              e.preventDefault();
-              if (isSmallScreen) handleToggleSidebar();
-              handleClick(e, path);
-            }}
-            className={cn(styles.url, {
-              [styles.active]:
-                path === '/'
-                  ? router.asPath === '/'
-                  : router.asPath.startsWith(path),
-              [styles.uxcoreIcon]: id === 'uxcore',
-              [styles.companyManagementIcon]: id === 'companyManagement',
-              [styles.articlesIcon]: id === 'articles',
-              [styles.ruUrl]: locale === 'ru',
-            })}
-          >
-            {logo} {name}
-          </a>
-        ))}
+        {routes.map(({ name, path, target, logo, id, activeMatch }, index) => {
+          const match = activeMatch ?? path;
+
+          const isActive =
+            match === '/'
+              ? router.asPath === '/'
+              : router.asPath.startsWith(match);
+
+          return (
+            <a
+              key={index}
+              href={path}
+              target={target}
+              onClick={e => {
+                if (target === '_blank') return;
+                e.preventDefault();
+                if (isSmallScreen) handleToggleSidebar();
+                handleClick(e, path);
+              }}
+              className={cn(styles.url, {
+                [styles.active]: isActive,
+                [styles.uxcoreIcon]: id === 'uxcore',
+                [styles.companyManagementIcon]: id === 'companyManagement',
+                [styles.articlesIcon]: id === 'articles',
+                [styles.ruUrl]: locale === 'ru',
+              })}
+            >
+              {logo} {name}
+            </a>
+          );
+        })}
+
         <a
           href={'/contributors'}
           onClick={e => {

public/keepsimple_/assets/longevity/study/mobile-charts/data-chart.webp

@@ -13,6 +13,7 @@ interface SeoGeneratorProps {
   localizedSlug?: any;
   modifiedDate?: string;
   createdDate?: string;
+  isLongevityPage?: boolean;
   ogTags?: {
     ogDescription: string;
     ogTitle: string;
@@ -38,6 +39,7 @@ const SeoGenerator: FC<SeoGeneratorProps> = ({
   createdDate,
   modifiedDate,
   localizedSlug,
+  isLongevityPage,
 }) => {
   const router = useRouter();
 
@@ -224,7 +226,9 @@ const SeoGenerator: FC<SeoGeneratorProps> = ({
         property="og:image"
         content={
           ogTags?.ogImage?.data?.attributes?.url
-            ? `${process.env.NEXT_PUBLIC_STRAPI}${ogTags?.ogImage?.data?.attributes?.url}`
+            ? isLongevityPage
+              ? ogTags?.ogImage?.data?.attributes?.url
+              : `${process.env.NEXT_PUBLIC_STRAPI}${ogTags?.ogImage?.data?.attributes?.url}`
             : ogTags?.ogImage?.data?.attributes?.staticUrl
         }
       />
@@ -254,7 +258,9 @@ const SeoGenerator: FC<SeoGeneratorProps> = ({
         name="twitter:image"
         content={
           ogTags?.ogImage?.data?.attributes?.url
-            ? `${process.env.NEXT_PUBLIC_STRAPI}${ogTags?.ogImage?.data?.attributes?.url}`
+            ? isLongevityPage
+              ? ogTags?.ogImage?.data?.attributes?.url
+              : `${process.env.NEXT_PUBLIC_STRAPI}${ogTags?.ogImage?.data?.attributes?.url}`
             : ogTags?.ogImage?.data?.attributes?.staticUrl
         }
       />

public/keepsimple_/assets/longevity/study/mobile-charts/data-mobile.webp

@@ -71,6 +71,7 @@ const LongevitySubSection: FC<LongevitySubSectionProps> = ({
               id={title}
               place={'bottom'}
               className={cn(styles.tooltip, {})}
+              clickable
             >
               <WhyDoThisTooltip
                 whatDamagesText={whatDamages}

public/keepsimple_/assets/longevity/study/mobile-charts/research-task-mobile.webp

@@ -11,7 +11,7 @@
   .subItem {
     background-image: url('/keepsimple_/assets/longevity/nav-bg.svg');
     background-repeat: no-repeat;
-    background-size: contain;
+    background-size: cover;
     width: 222px;
     height: 49px;
     text-align: center;
@@ -50,7 +50,7 @@
     text-decoration: none;
     cursor: pointer;
     background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png');
-
+    background-size: cover;
     .subLink,
     .link {
       color: #fff;
@@ -64,6 +64,7 @@
 
     &:hover {
       cursor: pointer;
+
       background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png');
     }
   }

public/keepsimple_/assets/longevity/study/mobile-charts/research-task.webp

@@ -104,7 +104,7 @@ const Navigation: FC = () => {
           width={1140}
           height={83}
           className={cn(styles.curtains, {
-            [styles.curtainsOpen]: router.pathname.includes('habits'),
+            [styles.curtainsOpen]: !router.asPath.includes('about-project'),
           })}
         />
         <ul className={styles.subUl}>