diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index b4ee341..b2928da 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,5 +1,6 @@
 import type { Preview } from "@storybook/web-components";
 
+import "../src/js/main.js";
 import "../src/scss/main.scss";
 import DocsTemplate from "./DocsTemplate.mdx";
 
diff --git a/eslint.config.js b/eslint.config.js
index c4e7fff..713ef2b 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -10,6 +10,7 @@ export default [
     languageOptions: {
       globals: {
         ...globals.node,
+        ...globals.browser,
       },
     },
   },
diff --git a/package.json b/package.json
index eabf545..f1f58b1 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
   },
   "files": [
     "src/scss/**/*.scss",
-    "dist/css/**/*.css"
+    "dist/css/**/*.css",
+    "dist/js/**/*.js"
   ],
   "scripts": {
     "start": "storybook dev -p 6006",
diff --git a/static/js/header.js b/src/js/components/header/header.js
similarity index 67%
rename from static/js/header.js
rename to src/js/components/header/header.js
index 689bb38..be7cb2e 100644
--- a/static/js/header.js
+++ b/src/js/components/header/header.js
@@ -14,7 +14,6 @@
 
     show = () => {
       this.wrapper.removeAttribute("hidden");
-      const reflow = this.wrapper.offsetHeight;
       document.addEventListener("keydown", (e) => this.handleKeyDown(e));
       this.wrapper.classList.add(this.openClass);
       setTimeout(() => {
@@ -48,20 +47,22 @@
     }
   }
 
-  const iatiMobileNav = new IatiMobileNav(
-    document.querySelector(".js-iati-mobile-nav"),
-    "iati-mobile-nav--open",
-  );
+  document.addEventListener("DOMContentLoaded", function () {
+    const iatiMobileNav = new IatiMobileNav(
+      document.querySelector(".js-iati-mobile-nav"),
+      "iati-mobile-nav--open",
+    );
 
-  const overlay = document.querySelector(".js-iati-mobile-overlay");
-  const menuOpenBtn = document.querySelector(".js-iati-menu-toggle-open");
-  const menuCloseBtn = document.querySelector(".js-iati-menu-toggle-close");
-  const restoreFocus = () => {
-    menuOpenBtn.focus();
-  };
-  menuOpenBtn.addEventListener("click", iatiMobileNav.show);
-  menuCloseBtn.addEventListener("click", () =>
-    iatiMobileNav.hide(restoreFocus),
-  );
-  overlay.addEventListener("click", () => iatiMobileNav.hide(restoreFocus));
+    const overlay = document.querySelector(".js-iati-mobile-overlay");
+    const menuOpenBtn = document.querySelector(".js-iati-menu-toggle-open");
+    const menuCloseBtn = document.querySelector(".js-iati-menu-toggle-close");
+    const restoreFocus = () => {
+      menuOpenBtn.focus();
+    };
+    menuOpenBtn.addEventListener("click", iatiMobileNav.show);
+    menuCloseBtn.addEventListener("click", () =>
+      iatiMobileNav.hide(restoreFocus),
+    );
+    overlay.addEventListener("click", () => iatiMobileNav.hide(restoreFocus));
+  });
 })();
diff --git a/src/js/main.js b/src/js/main.js
new file mode 100644
index 0000000..37ca1a0
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1 @@
+import "./components/header/header.js";
diff --git a/vite.config.js b/vite.config.js
index a9459cc..0314e59 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,12 +6,15 @@ export default defineConfig({
   build: {
     lib: {
       entry: {
+        iati: path.resolve(__dirname, "src/js/main.js"),
         css: path.resolve(__dirname, "src/scss/main.scss"),
       },
+      fileName: "iati",
       formats: ["es"],
     },
     rollupOptions: {
       output: {
+        entryFileNames: "js/[name].js",
         assetFileNames: (assetInfo) => {
           if (assetInfo.name == "style.css") {
             return `css/iati.css`;