= ({
[styles.big]: isBig,
[styles.bold]: isBold,
})}
+ style={textColor ? { color: textColor } : undefined}
>
{text}
diff --git a/src/components/Heading/Heading.types.ts b/src/components/Heading/Heading.types.ts
index f0b60ab..9340ae4 100644
--- a/src/components/Heading/Heading.types.ts
+++ b/src/components/Heading/Heading.types.ts
@@ -13,4 +13,5 @@ export type HeadingProps = {
locale?: string;
isBig?: boolean;
isBold?: boolean;
+ textColor?: string;
};
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 0d37929..f7b5449 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -12,8 +12,10 @@ import navbar from '@data/navbar';
import ArticlesDarkIcon from '@icons/ArticlesDarkIcon';
import ArticlesIcon from '@icons/ArticlesIcon';
import CompanyManagementIcon from '@icons/CompanyManagementIcon';
-import ToolsDarkIcon from '@icons/ToolsDarkIcon';
-import ToolsIcon from '@icons/ToolsIocn';
+import LongevityIcon from '@icons/navbar/longevity.svg';
+import LongevityDarkIcon from '@icons/navbar/longevity-dark.svg';
+import ToolsIcon from '@icons/navbar/tools.svg';
+import ToolsDarkIcon from '@icons/navbar/tools-dark.svg';
import UXCoreIcon from '@icons/UXCoreIcon';
import { GlobalContext } from '@components/Context/GlobalContext';
@@ -33,8 +35,22 @@ const Navbar: FC
= ({ handleToggleSidebar, handleClick }) => {
const { isDarkTheme, isOpenedSidebar } = useGlobals()[1];
const { accountData } = useContext(GlobalContext);
- const { about, companyManagement, articles, contributorsTxt, tools } =
- navbar[locale];
+ const {
+ about,
+ companyManagement,
+ articles,
+ contributorsTxt,
+ tools,
+ longevity,
+ } = navbar[locale];
+
+ const normalizePath = (p: string) => {
+ const noQueryOrHash = p.split('?')[0].split('#')[0];
+ if (noQueryOrHash.length > 1 && noQueryOrHash.endsWith('/')) {
+ return noQueryOrHash.slice(0, -1);
+ }
+ return noQueryOrHash;
+ };
const routes = [
{ name: about, path: '/', logo: '', target: '' },
@@ -54,12 +70,21 @@ const Navbar: FC = ({ handleToggleSidebar, handleClick }) => {
},
{
- name: tools,
+ name: longevity,
path: '/tools/longevity-protocol/about-project',
+ logo: isDarkTheme ? : ,
+ target: '',
+ id: 'longevity',
+ activeMatch: '/tools/longevity-protocol',
+ },
+ {
+ name: tools,
+ path: '/tools',
logo: isDarkTheme ? : ,
target: '',
id: 'tools',
- activeMatch: '/tools/longevity-protocol',
+ activeMatch: '/tools',
+ exact: true,
},
{
name: articles,
@@ -82,37 +107,43 @@ const Navbar: FC = ({ handleToggleSidebar, handleClick }) => {
[styles.authorized]: !!accountData,
})}
>
- {routes.map(({ name, path, target, logo, id, activeMatch }, index) => {
- const match = activeMatch ?? path;
-
- const isActive =
- match === '/'
- ? router.asPath === '/'
- : router.asPath.startsWith(match);
-
- return (
- {
- 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}
-
- );
- })}
+ {routes.map(
+ ({ name, path, target, logo, id, activeMatch, exact }, index) => {
+ const match = activeMatch ?? path;
+ const currentPath = normalizePath(router.asPath);
+ const matchPath = normalizePath(match);
+
+ const isActive =
+ matchPath === '/'
+ ? currentPath === '/'
+ : exact
+ ? currentPath === matchPath
+ : currentPath.startsWith(matchPath);
+
+ return (
+ {
+ 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}
+
+ );
+ },
+ )}
= ({ className }) => {
data-cy="zoomed-image"
>
-
+ wtd
+
= ({
onClick={e => e.stopPropagation()}
target="_blank"
>
- 
+