diff --git a/public/assets/ic-chevron-down.svg b/public/assets/ic-chevron-down.svg new file mode 100644 index 00000000..39b20af4 --- /dev/null +++ b/public/assets/ic-chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/tools/ai-hub.svg b/public/assets/tools/ai-hub.svg new file mode 100644 index 00000000..d6b65143 --- /dev/null +++ b/public/assets/tools/ai-hub.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/tools/mm-tournament.svg b/public/assets/tools/mm-tournament.svg new file mode 100644 index 00000000..7eb48396 --- /dev/null +++ b/public/assets/tools/mm-tournament.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/tools/sprite.svg b/public/assets/tools/sprite.svg index 8a91f09a..96526f5d 100644 --- a/public/assets/tools/sprite.svg +++ b/public/assets/tools/sprite.svg @@ -1,74 +1,4 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -105,6 +35,28 @@ + + + + + + + + + + + + + + + + + + + + + + @@ -309,6 +261,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -345,4 +324,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/components/LinksMenu.module.scss b/src/lib/components/LinksMenu.module.scss index c746fe6c..928328e1 100644 --- a/src/lib/components/LinksMenu.module.scss +++ b/src/lib/components/LinksMenu.module.scss @@ -70,6 +70,10 @@ color: #0D664E; } } + + &:global(.has-menu) { + cursor: pointer; + } } :global(.navButton) { @@ -108,3 +112,8 @@ .menuItemWrap { position: relative; } + +.ddIcon { + width: 11px; + margin-left: 3px; +} diff --git a/src/lib/components/LinksMenu.svelte b/src/lib/components/LinksMenu.svelte index 0f9857f4..dd4f642a 100644 --- a/src/lib/components/LinksMenu.svelte +++ b/src/lib/components/LinksMenu.svelte @@ -2,7 +2,9 @@ import type { NavMenuItem } from "lib/functions/nav-menu-item.model"; import styles from "./LinksMenu.module.scss"; import { classnames } from "lib/utils/classnames"; + import { getPublicPath } from 'lib/utils/paths'; import SubMenu from "./SubMenu.svelte"; + const chevronDownIconUrl = getPublicPath(`/assets/ic-chevron-down.svg`); export let ref: Element | undefined = undefined; @@ -16,7 +18,7 @@ let isPopupMenuActive: boolean = false; function isActiveMenu(menuItem: NavMenuItem) { - return menuItem.url === activeRoute?.url + return activeRoute?.url !== undefined && menuItem.url === activeRoute?.url } function itemHasHoverMenu(menuItem: NavMenuItem) { @@ -57,6 +59,9 @@ on:focus={handleMouseover(menuItem)} > {menuItem.label} + {#if itemHasHoverMenu(menuItem)} + + {/if} {#if hoveredMenuItem === menuItem && hoveredMenuItem?.children} a.menuItem { - font-family: $roboto; - font-size: 16px; - font-weight: 400; - line-height: 24px; + font-family: $nunito; + font-size: 14px; + font-weight: 700; + line-height: 20px; text-align: left; white-space: nowrap; @@ -58,7 +58,7 @@ $transitionInDelay: 15ms; color: #202020; &:hover, &:global(.active) { - color: color(hoverMenuLink, hover); + color: #0d61bf; font-weight: 700; } diff --git a/src/lib/config/nav-menu/all-nav-items.config.ts b/src/lib/config/nav-menu/all-nav-items.config.ts index b976fa5c..f40e4355 100644 --- a/src/lib/config/nav-menu/all-nav-items.config.ts +++ b/src/lib/config/nav-menu/all-nav-items.config.ts @@ -25,10 +25,33 @@ export const allNavItems: {[key: string]: NavMenuItem} = { label: 'I\'m a Freelancer', url: getWordpressUrl('/freelancer'), }, + community: { + label: 'Community', + }, + opportunities: { + label: 'Opportunities', + url: getWordpressUrl('/challenges'), + }, + mmTournament: { + label: 'Marathon Match Tournament', + icon: 'mm-tournament', + description: 'Join the Excitement', + url: getWordpressUrl('/marathon-match-tournament'), + }, + aiHub: { + label: 'AI Hub', + icon: 'ai-hub', + description: 'Collaborate, Compete, Create', + url: getWordpressUrl('/ai-hub'), + }, howItWorks: { label: 'How it works', url: getWordpressUrl('/how-it-works'), }, + statistics: { + label: 'Statistics', + url: getWordpressUrl('/community/statistics'), + }, demo: { label: 'Demo', url: getWordpressUrl('/customer/demo'), @@ -61,7 +84,7 @@ export const allNavItems: {[key: string]: NavMenuItem} = { label: 'Articles', icon: 'articles', description: 'Get insights and tips about Topcoder', - url: `${THRIVE_HOST}/thrive`, + url: getWordpressUrl('/thrive'), }, bookADemo: { label: 'Book a Demo', diff --git a/src/lib/config/nav-menu/footer-nav-items.ts b/src/lib/config/nav-menu/footer-nav-items.ts index 13cdb743..369a9a2c 100644 --- a/src/lib/config/nav-menu/footer-nav-items.ts +++ b/src/lib/config/nav-menu/footer-nav-items.ts @@ -29,6 +29,11 @@ export const footerNavItems: NavMenuItem = { label: 'I\'m a Freelancer', url: getWordpressUrl('/freelancer'), }, + allNavItems.opportunities, + allNavItems.mmTournament, + // allNavItems.aiHub, + allNavItems.articles, + allNavItems.statistics, ] }, { diff --git a/src/lib/config/nav-menu/main-navigation.config.ts b/src/lib/config/nav-menu/main-navigation.config.ts index 2a030893..55953fab 100644 --- a/src/lib/config/nav-menu/main-navigation.config.ts +++ b/src/lib/config/nav-menu/main-navigation.config.ts @@ -6,4 +6,15 @@ export const mainNavigationItems: NavMenuItem[] = [ allNavItems.howItWorks, allNavItems.talent, allNavItems.customerStories, + allNavItems.freelancer, + { + ...allNavItems.community, + children: [ + allNavItems.opportunities, + allNavItems.mmTournament, + // allNavItems.aiHub, + allNavItems.articles, + allNavItems.statistics, + ] + }, ] diff --git a/src/lib/config/nav-menu/marketing-nav-items.ts b/src/lib/config/nav-menu/marketing-nav-items.ts index fc51912e..0ad90fa2 100644 --- a/src/lib/config/nav-menu/marketing-nav-items.ts +++ b/src/lib/config/nav-menu/marketing-nav-items.ts @@ -10,6 +10,5 @@ export const marketingNavItems: NavMenuItem = { } export const marketingRightItems: NavMenuItem[] = [ - allNavItems.freelancer, allNavItems.login, ] diff --git a/src/lib/config/nav-menu/tool-selector-nav-items.ts b/src/lib/config/nav-menu/tool-selector-nav-items.ts index 8f246b90..0a02999b 100644 --- a/src/lib/config/nav-menu/tool-selector-nav-items.ts +++ b/src/lib/config/nav-menu/tool-selector-nav-items.ts @@ -45,18 +45,19 @@ export const toolSelectorNavItems: NavMenuItem = { allNavItems.payments ] }, - { - label: "AI", - groupOrder: 3, - children: [ - allNavItems.ai360Platform, - ] - }, + // { + // label: "AI", + // groupOrder: 3, + // children: [ + // allNavItems.aiHub, + // ] + // }, { label: "Compete", groupOrder: 3, children: [ allNavItems.marathonMatchesApp, + allNavItems.mmTournament, ] }, { diff --git a/src/lib/utils/routes.ts b/src/lib/utils/routes.ts index f795a946..def9e8c1 100644 --- a/src/lib/utils/routes.ts +++ b/src/lib/utils/routes.ts @@ -2,6 +2,10 @@ import type { NavMenuItem } from '../functions/nav-menu-item.model'; import { escapeRegExp } from "./regex"; export const routeMatchesUrl = (url: string, route: NavMenuItem): boolean => { + if (route.url === undefined || route.url === null) { + return false; + } + const urlObj = new URL(route.url); const routeUrl = `${urlObj.origin}${urlObj.pathname}`; @@ -96,6 +100,7 @@ export const matchRoutes = (navMenu: NavMenuItem, path: string): NavMenuItem[] = */ export function getActiveRoute(navMenuItems: NavMenuItem[], trailLevel?: number): NavMenuItem[] { const locationHref = `${location.origin}${location.pathname}` - const activeRouteTrail = [].concat(matchRoutes({ children: navMenuItems } as NavMenuItem, locationHref)) + const activeRouteTrail = [].concat(matchRoutes({ children: navMenuItems } as NavMenuItem, locationHref)).filter(Boolean) + return typeof trailLevel === 'number' ? activeRouteTrail?.slice(trailLevel, 1) : activeRouteTrail }