create initial files for navigation component

sites/fast-website/src/app/components/index.ts

@@ -1,3 +1,4 @@
 export { GradientPicker } from "./gradient-picker";
 export { FASTSectionHeader } from "./section-header";
 export { FastFrame } from "./fast-frame";
+export { SiteNavigation } from "./site-navigation";

sites/fast-website/src/app/components/site-navigation/index.ts

@@ -0,0 +1,14 @@
+import { customElement } from "@microsoft/fast-element";
+import { SiteNavigation } from "./site-navigation";
+import { SiteNavigationTemplate as template } from "./site-navigation.template";
+import { SiteNavigationStyles as styles } from "./site-navigation.styles";
+
+@customElement({
+    name: "fast-site-navigation",
+    template,
+    styles,
+})
+export class FASTSectionHeader extends SiteNavigation {}
+export * from "./site-navigation.template";
+export * from "./site-navigation.styles";
+export * from "./site-navigation";

sites/fast-website/src/app/components/site-navigation/site-navigation.styles.ts

@@ -0,0 +1,10 @@
+import { css } from "@microsoft/fast-element";
+import { display } from "@microsoft/fast-components";
+
+export const SiteNavigationStyles = css`
+    ${display("flex")} :host {
+        font-family: var(--body-font);
+        color: var(--neutral-foreground-rest);
+        box-sizing: border-box;
+    }
+`;

sites/fast-website/src/app/components/site-navigation/site-navigation.template.ts

@@ -0,0 +1,16 @@
+import { html, repeat } from "@microsoft/fast-element";
+import { SiteNavigation } from "./site-navigation";
+
+export const SiteNavigationTemplate = html<SiteNavigation>`
+    <template>
+        <nav>
+            <ul>
+                ${repeat(
+                    x => x.items,
+                    html` <li><fast-anchor>Component</fast-anchor></li> `
+                )}
+            </ul>
+            <slot></slot>
+        </nav>
+    </template>
+`;

sites/fast-website/src/app/components/site-navigation/site-navigation.ts

@@ -0,0 +1,9 @@
+import { FASTElement, attr, observable } from "@microsoft/fast-element";
+
+export class SiteNavigation extends FASTElement {
+    @attr
+    public item: string;
+
+    @observable
+    public items: string[] = [];
+}

sites/fast-website/src/public/index.html

@@ -13,6 +13,7 @@
         <header class="header">
           <fast-anchor href="#" appearance="lightweight">Logo</fast-anchor>
           <div class="header-link-group">
+            <fast-site-navigation>Component</fast-site-navigation>
             <fast-anchor href="#" appearance="lightweight">Component</fast-anchor>
             <fast-anchor href="#" appearance="lightweight">Integration</fast-anchor>
             <fast-anchor href="#" appearance="lightweight">Documentation</fast-anchor>