diff --git a/public/assets/logo.min.svg b/public/assets/logo.min.svg index 5498403a..394868e7 100644 --- a/public/assets/logo.min.svg +++ b/public/assets/logo.min.svg @@ -1 +1 @@ - + diff --git a/src/lib/components/LinksMenu.module.scss b/src/lib/components/LinksMenu.module.scss index 57ad6a33..c746fe6c 100644 --- a/src/lib/components/LinksMenu.module.scss +++ b/src/lib/components/LinksMenu.module.scss @@ -3,7 +3,7 @@ .linksMenuWrap { display: flex; align-items: center; - gap: 32px; + gap: 48px; flex: 1 0 auto; :global(.navLink) { @@ -24,9 +24,10 @@ & { // same as secondary styles color: #AAAAAA; font-family: $nunito; - font-weight: 500; + font-weight: 700; font-size: 14px; line-height: 22px; + white-space: nowrap; &:hover, &:global(.hover) { color: #FFFFFF; @@ -44,16 +45,16 @@ &.primary { color: #2A2A2A; font-family: $nunito; - font-weight: 500; + font-weight: 700; font-size: 16px; line-height: 24px; &:hover, &:global(.hover) { - color: rgba(#2A2A2A, 0.6); + color: #0d61bf; } &:global(.active) { - color: #16679A; + color: #0d61bf; } } @@ -95,6 +96,13 @@ font-weight: 500; } } + + &.vertical { + flex-direction: column; + gap: 12px; + align-items: flex-start; + padding: 0 16px; + } } .menuItemWrap { diff --git a/src/lib/components/LinksMenu.svelte b/src/lib/components/LinksMenu.svelte index 131d2ce8..0f9857f4 100644 --- a/src/lib/components/LinksMenu.svelte +++ b/src/lib/components/LinksMenu.svelte @@ -10,6 +10,7 @@ export let menuItems: NavMenuItem[]; export let activeRoute: NavMenuItem = undefined; export let activeRoutePath: NavMenuItem[] = []; + export let vertical: boolean = false; let hoveredMenuItem: NavMenuItem = undefined; let hoveredElement: HTMLElement = undefined; let isPopupMenuActive: boolean = false; @@ -41,7 +42,7 @@ } -