Merge pull request #106 from topcoder-platform/PROD-3412_add-about-us

PROD-3412 - add about us for the marketing navigation -> dev

Author: brooketopcoder

src/lib/components/user-area/UserArea.module.scss

@@ -1,6 +1,6 @@
 @import 'lib/styles/mixins.scss';
 
-.authWrap {
+.userAreaWrap {
   display: flex;
   align-items: center;
   gap: 36px;

src/lib/components/user-area/UserArea.svelte

@@ -17,8 +17,8 @@
 
 </script>
 
-<div class={styles.authWrap}>
-  {#if isReady}
+{#if isReady}
+  <div class={styles.userAreaWrap}>
     {#if !user}
     <div class={styles.btnsWrap}>
       <Button label="Log in" onClick={onSignIn} />
@@ -31,6 +31,6 @@
         onSignOut={onSignOut}
       />
     {/if}
-  {/if}
-</div>
+  </div>
+{/if}
 

src/lib/config/nav-menu/nav-item-config.model.ts

@@ -2,6 +2,7 @@ import type { NavMenuItem } from "lib/functions/nav-menu-item.model";
 
 export interface NavItemConfig {
     about: NavMenuItem
+    aboutUs: NavMenuItem
     announcements: NavMenuItem
     articles: NavMenuItem
     benefits: NavMenuItem

src/lib/config/nav-menu/nav-items.dev.config.ts

@@ -10,6 +10,11 @@ export const navItemsConfigDev: NavItemConfig = {
             }
         ],
     },
+    aboutUs: {
+        label: "About Us",
+        description: "",
+        url: "https://uninav.topcoder.com/about-us"
+    },
     announcements: {
         label: 'Announcements',
         description: 'Important announcements to the Topcoder community.',

src/lib/config/nav-menu/nav-items.prod.config.ts

@@ -10,6 +10,11 @@ export const navItemsConfigProd: NavItemConfig = {
             }
         ],
     },
+    aboutUs: {
+        label: "About Us",
+        description: "",
+        url: "https://uninav.topcoder.com/about-us"
+    },
     announcements: {
         label: 'Announcements',
         description: 'Important announcements to the Topcoder community.',

src/lib/marketing-navigation/components/NavigationBar.module.scss

@@ -0,0 +1,16 @@
+.separator {
+  display: block;
+  padding: 0 32px 0 48px;
+  margin: -18px 0;
+  &:before {
+    content: "";
+    display: block;
+    width: 1px;
+    background: #767676;
+    height: 100%;
+  }
+
+  &:last-child {
+    display: none;
+  }
+}

src/lib/marketing-navigation/components/NavigationBar.svelte

@@ -4,6 +4,9 @@
     import LinksMenu from '../../components/LinksMenu.svelte';
     import TopNavbar from 'lib/components/TopNavbar.svelte';
     import MobileNavigation from 'lib/mobile-navigation/MobileNavigation.svelte';
+    import { navItems } from 'lib/config/nav-menu/nav-items.config';
+    import styles from './NavigationBar.module.scss';
+
 
     export let style: 'primary'|'secondary'|'tertiary';
     export let menuItems: NavMenuItem[] = [];
@@ -41,5 +44,11 @@
     </LinksMenu>
   {/if}
 
-  <slot name="auth" slot="right"></slot>
+  <svelte:fragment slot="right">
+    {#if !isMobile}
+      <LinksMenu menuItems={[navItems.aboutUs]} style="primary" />
+      <div class={styles.separator}/>
+    {/if}
+    <slot name="auth"></slot>
+  </svelte:fragment>
 </TopNavbar>

types/src/lib/config/nav-menu/nav-item-config.model.d.ts

@@ -1,6 +1,7 @@
 import type { NavMenuItem } from "lib/functions/nav-menu-item.model";
 export interface NavItemConfig {
     about: NavMenuItem;
+    aboutUs: NavMenuItem;
     announcements: NavMenuItem;
     articles: NavMenuItem;
     benefits: NavMenuItem;