update header module

examples/getting-started/getting-started-project/src/components/modules/Header/index.tsx

@@ -1,16 +1,29 @@
-import { ImageField, ModuleFields } from '@hubspot/cms-components/fields';
+import { Menu } from '@hubspot/cms-components';
+import {
+  ImageField,
+  MenuField,
+  ModuleFields,
+} from '@hubspot/cms-components/fields';
+import logo from '../../../assets/sprocket.svg';
+import headerStyles from '../../../styles/header.module.css';
 
 export function Component({ fieldValues }) {
-  return <img src={fieldValues.logo} alt="Logo" />;
+  return (
+    <header className={headerStyles.wrapper}>
+      <nav>
+        <img src={fieldValues.logo.src} alt="Logo" />
+        <Menu fieldPath={fieldValues.menu} />
+      </nav>
+    </header>
+  );
 }
 
+const DEFAULT_MENU_ID = '53522818668';
+
 export const fields = (
   <ModuleFields>
-    <ImageField
-      name="logo"
-      label="Logo"
-      default={{ src: '../../../assets/sprocket.svg' }}
-    />
+    <ImageField name="logo" label="Logo" default={{ src: logo }} />
+    <MenuField name="menu" label="Menu" default={DEFAULT_MENU_ID} />
   </ModuleFields>
 );
 

examples/getting-started/getting-started-project/src/styles/header.module.css

@@ -0,0 +1,12 @@
+.wrapper {
+  width: 100%;
+  background-color: transparent;
+
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+    padding: 15px 25px;
+  }
+}

examples/getting-started/package.json

@@ -12,13 +12,13 @@
     "yarpm": "^1.2.0"
   },
   "scripts": {
-    "start": "cd project/src && yarpm start",
-    "postinstall": "cd project/src && yarpm install",
+    "start": "cd getting-started-project/src && yarpm start",
+    "postinstall": "cd getting-started-project/src && yarpm install",
     "lint:js": "eslint . --ext .js,.jsx",
     "prettier": "prettier . --check",
     "watch:hubl": "hs watch getting-started-theme getting-started-theme",
     "upload:hubl": "hs upload getting-started-theme getting-started-theme",
-    "deploy": "hs project upload project"
+    "deploy": "hs project upload getting-started-project"
   },
   "dependencies": {},
   "engines": {