{"_id":"@dnagtx/dna-gtx-navbar","_rev":"6-31041dd081a039fd0f0e0f72d7040f2f","name":"@dnagtx/dna-gtx-navbar","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"@dnagtx/dna-gtx-navbar","version":"1.0.0","keywords":["navbar","react","dna-gtx"],"license":"MIT","_id":"@dnagtx/dna-gtx-navbar@1.0.0","maintainers":[{"name":"dnagtx","email":"it.dnagtx@gmail.com"}],"homepage":"https://github.com/DNA-GTx/dna-gtx-navbar#readme","bugs":{"url":"https://github.com/DNA-GTx/dna-gtx-navbar/issues"},"dist":{"shasum":"690511c02c150ee6cabd5156187d6a2e2ae58bce","tarball":"https://registry.npmjs.org/@dnagtx/dna-gtx-navbar/-/dna-gtx-navbar-1.0.0.tgz","fileCount":8,"integrity":"sha512-smbzpyy+BxXhLtjyjNTqswBa7GQYAS1CzL6wZ1ikWCBJ2rCoA4uyurNTg0uZCPkb0evJJz0KAHYNNUmbXByy2A==","signatures":[{"sig":"MEUCIEuSZ8Uda8acqXWtAtBl7sjm4u4xLJHOPvg3iGCP5ZHIAiEAkfIRRzILl/4C4g+jMdDs+8Gp1IaDC9k2Td4UqFFaQvw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66899},"main":"src/index.jsx","type":"module","gitHead":"61ba3145b54a2aa0e7f65b6f6e22deaa9722b5c6","scripts":{"dev":"npm --prefix preview run dev","build":"npm --prefix preview run build"},"_npmUser":{"name":"dnagtx","email":"it.dnagtx@gmail.com"},"repository":{"url":"git+https://github.com/DNA-GTx/dna-gtx-navbar.git","type":"git"},"_npmVersion":"11.6.2","description":"DNA GTx site navbar as a reusable React component.","directories":{},"_nodeVersion":"25.1.0","_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/dna-gtx-navbar_1.0.0_1786518651202_0.5522694175991067","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@dnagtx/dna-gtx-navbar","version":"1.0.1","keywords":["navbar","react","dna-gtx"],"license":"MIT","_id":"@dnagtx/dna-gtx-navbar@1.0.1","maintainers":[{"name":"dnagtx","email":"it.dnagtx@gmail.com"}],"homepage":"https://github.com/DNA-GTx/dna-gtx-navbar#readme","bugs":{"url":"https://github.com/DNA-GTx/dna-gtx-navbar/issues"},"dist":{"shasum":"f8b46d375aa676d43c4a8ad66c665c30c2128a33","tarball":"https://registry.npmjs.org/@dnagtx/dna-gtx-navbar/-/dna-gtx-navbar-1.0.1.tgz","fileCount":8,"integrity":"sha512-dTBpkW/A0iqyO5ybBTKF7P07yDmSnozG6YuL2wzN4qWgTm8aHkWwHpYhTiE8pLriljg60M7hVskgGwonYQLL8w==","signatures":[{"sig":"MEYCIQC0YoI0ClQoS8kFiuH8SiI/oZG7g903wRoCwluxQBeZwgIhAIkqmhc/dlhAE4UKIk/vn3LiYFUgKdYV4Jlst6kcSUjX","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66957},"main":"src/index.jsx","type":"module","gitHead":"0821f614dc9f0d6beadf47d093ed4a5f0890c006","scripts":{"dev":"npm --prefix preview run dev","build":"npm --prefix preview run build"},"_npmUser":{"name":"dnagtx","email":"it.dnagtx@gmail.com"},"repository":{"url":"git+https://github.com/DNA-GTx/dna-gtx-navbar.git","type":"git"},"_npmVersion":"11.6.2","description":"DNA GTx site navbar as a reusable React component.","directories":{},"_nodeVersion":"25.1.0","_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/dna-gtx-navbar_1.0.1_1786530401413_0.17356886924369253","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@dnagtx/dna-gtx-navbar","version":"1.0.2","keywords":["navbar","react","dna-gtx"],"license":"MIT","_id":"@dnagtx/dna-gtx-navbar@1.0.2","maintainers":[{"name":"dnagtx","email":"it.dnagtx@gmail.com"}],"homepage":"https://github.com/DNA-GTx/dna-gtx-navbar#readme","bugs":{"url":"https://github.com/DNA-GTx/dna-gtx-navbar/issues"},"dist":{"shasum":"ced8170f754e640b4b586e74ca88cb76a67f15e3","tarball":"https://registry.npmjs.org/@dnagtx/dna-gtx-navbar/-/dna-gtx-navbar-1.0.2.tgz","fileCount":8,"integrity":"sha512-e/36W5FCHm1WXFOko+bzTrWWG4sw/NMLj0idkcdKtaNDN8wDSmQny7wzeynB96JPU9S7+TmzGtvB5A0ShnauVg==","signatures":[{"sig":"MEYCIQC53pgnq30haHpsBlKEKs+neFmOSpwJPKMw/DdnDwBKVgIhAIOkQZw+PSLLNDS2sxbhuToxK+DcfCbnuKNt4stINp2g","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":83649},"main":"src/index.jsx","type":"module","gitHead":"288ff429824aa6c7653fd597650ca253bf9eb84f","scripts":{"dev":"npm --prefix preview run dev","build":"npm --prefix preview run build"},"_npmUser":{"name":"dnagtx","email":"it.dnagtx@gmail.com"},"repository":{"url":"git+https://github.com/DNA-GTx/dna-gtx-navbar.git","type":"git"},"_npmVersion":"11.6.2","description":"DNA GTx site navbar as a reusable React component.","directories":{},"_nodeVersion":"25.1.0","_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/dna-gtx-navbar_1.0.2_1786625551683_0.5104466981542959","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@dnagtx/dna-gtx-navbar","version":"1.0.3","keywords":["navbar","react","dna-gtx"],"license":"MIT","_id":"@dnagtx/dna-gtx-navbar@1.0.3","maintainers":[{"name":"dnagtx","email":"it.dnagtx@gmail.com"}],"homepage":"https://github.com/DNA-GTx/dna-gtx-navbar#readme","bugs":{"url":"https://github.com/DNA-GTx/dna-gtx-navbar/issues"},"dist":{"shasum":"d0a974233ef32c7c23d75c67898276996b67c9da","tarball":"https://registry.npmjs.org/@dnagtx/dna-gtx-navbar/-/dna-gtx-navbar-1.0.3.tgz","fileCount":8,"integrity":"sha512-dHD7TnUDssZcTkil+C4aCqEVbzYbxJ7/PhCXvfPPHLUQhhftkGK8VgrHKUti7Jn2AFKoLW7aGxCbjK49fvb5+g==","signatures":[{"sig":"MEUCIQCL533uemB76QfO87L+BguT74rOgbzkvm3lOl0XN9GVsgIgcKiy4kQ8hAqsxDICDZoXNqWMxNjSMa4yr8aG/x8k+Zc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84016},"main":"src/index.jsx","type":"module","gitHead":"6abb393cfae1946649a3956aa376b06526cfb633","scripts":{"dev":"npm --prefix preview run dev","build":"npm --prefix preview run build"},"_npmUser":{"name":"dnagtx","email":"it.dnagtx@gmail.com"},"repository":{"url":"git+https://github.com/DNA-GTx/dna-gtx-navbar.git","type":"git"},"_npmVersion":"11.6.2","description":"DNA GTx site navbar as a reusable React component.","directories":{},"_nodeVersion":"25.1.0","_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/dna-gtx-navbar_1.0.3_1786711687322_0.7971005358222052","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@dnagtx/dna-gtx-navbar","version":"1.0.4","keywords":["navbar","react","dna-gtx"],"license":"MIT","_id":"@dnagtx/dna-gtx-navbar@1.0.4","maintainers":[{"name":"dnagtx","email":"it.dnagtx@gmail.com"}],"homepage":"https://github.com/DNA-GTx/dna-gtx-navbar#readme","bugs":{"url":"https://github.com/DNA-GTx/dna-gtx-navbar/issues"},"dist":{"shasum":"e0ed20f6f210a3bc79e46d3d0bba43f093b65adb","tarball":"https://registry.npmjs.org/@dnagtx/dna-gtx-navbar/-/dna-gtx-navbar-1.0.4.tgz","fileCount":8,"integrity":"sha512-QpkRV+khvDeneshnCz8+JWHwGnahjDWLMfVREyMuAoe16eb8scdvbe/KxAMhpCPBh6Z13FClNtfDjzX/dK5Hug==","signatures":[{"sig":"MEUCIEYXUtPr8f+i0pOctmW/nHIiy/Nss7k18YHVC02Jbq+JAiEAqC4d00d2bzUKc6H8o0xJkrWvOTEHEYyKjCKyKDtmFuo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":85287},"main":"src/index.jsx","type":"module","gitHead":"0db99e38d1d1486c76f785f6141ba0a88d3bcd1d","scripts":{"dev":"npm --prefix preview run dev","build":"npm --prefix preview run build"},"_npmUser":{"name":"dnagtx","email":"it.dnagtx@gmail.com"},"repository":{"url":"git+https://github.com/DNA-GTx/dna-gtx-navbar.git","type":"git"},"_npmVersion":"11.6.2","description":"DNA GTx site navbar as a reusable React component.","directories":{},"_nodeVersion":"25.1.0","_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/dna-gtx-navbar_1.0.4_1786777375743_0.06302714064784443","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@dnagtx/dna-gtx-navbar","version":"1.0.5","description":"DNA GTx site navbar as a reusable React component.","repository":{"type":"git","url":"git+https://github.com/DNA-GTx/dna-gtx-navbar.git"},"main":"src/index.jsx","type":"module","scripts":{"dev":"npm --prefix preview run dev","build":"npm --prefix preview run build"},"peerDependencies":{"react":">=16.8.0"},"keywords":["navbar","react","dna-gtx"],"license":"MIT","gitHead":"195367a99615a68bc93001849a11f0e18f64cb03","_id":"@dnagtx/dna-gtx-navbar@1.0.5","bugs":{"url":"https://github.com/DNA-GTx/dna-gtx-navbar/issues"},"homepage":"https://github.com/DNA-GTx/dna-gtx-navbar#readme","_nodeVersion":"25.1.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-LfUkJHgOAZ+x36W//J3/IUJfkOUKoHSOjZXcZX5LOzqAcZZB1zHJWrTIG2r0Q/T84w11HocVOrBvM/kLcC5Fkw==","shasum":"08c33a3c2758bcf9aa61007d2f22d1b6b2bbc04d","tarball":"https://registry.npmjs.org/@dnagtx/dna-gtx-navbar/-/dna-gtx-navbar-1.0.5.tgz","fileCount":8,"unpackedSize":85525,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDXfrUWZQ+iVqlCc/hBPHUSERIoC5Azo3oTErKaroPsewIhAIoKTo3xK+gme6S1LeWn2rWOU40k7mQnpw5YpsmjgzW9"}]},"_npmUser":{"name":"dnagtx","email":"it.dnagtx@gmail.com"},"directories":{},"maintainers":[{"name":"dnagtx","email":"it.dnagtx@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dna-gtx-navbar_1.0.5_1786778704758_0.3475789747629441"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-12T07:10:50.993Z","modified":"2026-08-15T07:25:05.066Z","1.0.0":"2026-08-12T07:10:51.381Z","1.0.1":"2026-08-12T10:26:41.576Z","1.0.2":"2026-08-13T12:52:31.814Z","1.0.3":"2026-08-14T12:48:07.532Z","1.0.4":"2026-08-15T07:02:55.884Z","1.0.5":"2026-08-15T07:25:04.906Z"},"bugs":{"url":"https://github.com/DNA-GTx/dna-gtx-navbar/issues"},"license":"MIT","homepage":"https://github.com/DNA-GTx/dna-gtx-navbar#readme","keywords":["navbar","react","dna-gtx"],"repository":{"type":"git","url":"git+https://github.com/DNA-GTx/dna-gtx-navbar.git"},"description":"DNA GTx site navbar as a reusable React component.","maintainers":[{"name":"dnagtx","email":"it.dnagtx@gmail.com"}],"readme":"# dna-gtx-navbar\n\nTwo DNA GTx navbar components: `Navbar` for the public marketing site, and\n`DashboardNavbar` for logged-in app pages. Logo and layout are fixed in both;\nonly links/buttons are configurable.\n\nRequires React 16.8+ (no other dependencies). Both are responsive: below\n1024px wide, spacing tightens up. Below 768px:\n- `Navbar` collapses its links behind a hamburger that opens a small dropdown\n  below the bar (logo and login/avatar stay visible).\n- `DashboardNavbar` collapses everything — tabs *and* the profile hamburger —\n  behind a hamburger at the far right that opens a full-height drawer sliding\n  in from the right, showing the user's name/avatar at the top, then the\n  tabs, then the `avatarMenu` items.\n\n**Your page's `<html><head>` must include\n`<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">`** —\nwithout it, mobile browsers render at a fake ~980px desktop width and the\nbreakpoints never trigger. Most app scaffolds (CRA, Vite, Next.js) already\ninclude this by default.\n\n## Install\n\nThis package isn't on the public npm registry — install it straight from\nthe GitHub repo:\n\n```\nnpm install git+https://github.com/DNA-GTx/dna-gtx-navbar.git\n```\n\nColleagues with repo access can run the same command. To pick up later\nupdates, they just re-run it or `npm update @dnagtx/dna-gtx-navbar`.\n\n## `Navbar` — public site navbar\n\nFloating translucent glass pill, meant to sit over a hero image.\n\n```jsx\nimport Navbar from '@dnagtx/dna-gtx-navbar';\n\nfunction App() {\n  return (\n    <Navbar\n      links={[\n        { label: 'About us', href: '/about' },\n        { label: 'FAQ', href: '/faq' },\n        { label: 'Our team', href: '/team' }\n      ]}\n      loginLabel=\"Login\"\n      onLoginClick={() => console.log('login clicked')}\n    />\n  );\n}\n```\n\n`links` accepts any number of items — add, remove, or reorder as needed. Each\nitem can navigate via `href`, run custom logic via `onClick`, or both:\n\n```jsx\n<Navbar\n  links={[\n    { label: 'About us', onClick: () => setPage('about') },\n    { label: 'FAQ', onClick: () => setPage('faq') },\n    { label: 'Our team', onClick: () => setPage('team') },\n    { label: 'Contact', onClick: () => setPage('contact') }\n  ]}\n/>\n```\n\nWhen `isLoggedIn` is true, the right-hand button swaps to a round avatar\nshowing the first letter of `userName`, instead of the Login pill:\n\n```jsx\n<Navbar\n  isLoggedIn={user !== null}\n  loginLabel=\"Login\"\n  onLoginClick={() => setUser(fakeLogin())}\n  userName={user?.name}\n  onLoggedInClick={() => setUser(null)}\n/>\n```\n\n### `Navbar` props\n\n| Prop              | Type     | Default                            | Description                          |\n|-------------------|----------|-------------------------------------|---------------------------------------|\n| `links`           | array    | About us / FAQ / Our team           | Any number of `{ label, href, onClick }` items |\n| `loginLabel`      | string   | `\"Login\"`                           | Button text when logged out           |\n| `onLoginClick`    | function | `undefined`                         | Click handler when logged out         |\n| `isLoggedIn`      | boolean  | `false`                             | Swaps the button to a round avatar    |\n| `userName`        | string   | `undefined`                         | Avatar shows this name's first letter |\n| `onLoggedInClick` | function | `undefined`                         | Click handler when logged in          |\n| `onLogoClick`     | function | `undefined`                         | Logo click handler (e.g. navigate home) |\n| `className`       | string   | `undefined`                         | Extra class on the root `<nav>`       |\n\nThe logo itself (image and alt text) is fixed and not configurable — only\nits click behavior is. If `isLoggedIn` is true but no `userName` is given,\nthe button falls back to showing the text \"Account\" instead of an avatar\nletter.\n\n## `DashboardNavbar` — logged-in app navbar\n\nFull-width bar for authenticated app pages: active tab gets a solid dark\npill, inactive tabs are plain text, and the right side is a hamburger icon\nthat opens the profile dropdown (no logged-out state — use this only once a\nuser is signed in).\n\n```jsx\nimport { DashboardNavbar } from '@dnagtx/dna-gtx-navbar';\n\nfunction AppLayout() {\n  const [page, setPage] = useState('profile');\n\n  return (\n    <DashboardNavbar\n      links={[\n        { label: 'My Profile', active: page === 'profile', onClick: () => setPage('profile') },\n        { label: 'My Reports', active: page === 'reports', onClick: () => setPage('reports') }\n      ]}\n      userName={user.name}\n      avatarMenu={[\n        { label: 'View profile', onClick: () => setPage('profile') },\n        { label: 'Account settings', onClick: () => setPage('settings') },\n        { label: 'Log out', onClick: () => logOut() }\n      ]}\n    />\n  );\n}\n```\n\nClicking the hamburger icon opens a dropdown built from `avatarMenu` — any\nnumber of `{ label, href, onClick }` items, same pattern as `links`. It\ncloses automatically after picking an item or clicking anywhere outside it.\nOmit `avatarMenu` (or pass an empty array) and clicking it just fires\n`onAvatarClick` with no dropdown, as before. `userName` is still used to show\nthe user's initial and full name in the mobile drawer header.\n\nAny item in `links` can have its own `dropdown` too — a nested list of\n`{ label, href, onClick }` items. A link with a `dropdown` renders as a\nbutton with a chevron instead of a plain link; clicking it opens a floating\npanel on desktop, or expands inline (indented) in the mobile drawer:\n\n```jsx\n<DashboardNavbar\n  links={[\n    { label: 'My Profile', active: true },\n    {\n      label: 'Reports',\n      dropdown: [\n        { label: 'Weekly report', onClick: () => openReport('weekly') },\n        { label: 'Monthly report', onClick: () => openReport('monthly') }\n      ]\n    }\n  ]}\n/>\n```\n\n### `DashboardNavbar` props\n\n| Prop             | Type     | Default                          | Description                              |\n|------------------|----------|------------------------------------|--------------------------------------------|\n| `links`          | array    | My Profile (active) / My Reports  | Any number of `{ label, active, href, onClick, dropdown }` items — `dropdown` is an optional nested array of `{ label, href, onClick }` |\n| `userName`       | string   | `undefined`                        | Shown (with first-letter avatar) in the mobile drawer header |\n| `avatarMenu`     | array    | `undefined`                        | Any number of `{ label, href, onClick }` dropdown items |\n| `onAvatarClick`  | function | `undefined`                        | Click handler for the hamburger icon (fires alongside opening the dropdown, if any) |\n| `onLogoClick`    | function | `undefined`                        | Logo click handler (e.g. navigate home)    |\n| `className`      | string   | `undefined`                        | Extra class on the root `<nav>`            |\n\n## Publishing updates (for maintainers)\n\n```\ngit add -A\ngit commit -m \"describe the change\"\ngit push\n```\n\nColleagues installing via the git URL pick up changes on their next\n`npm install` / `npm update`. No version bump or npm login required.\n","readmeFilename":"README.md"}