{"_id":"@ar-dacity/ardacity-navbar","name":"@ar-dacity/ardacity-navbar","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ar-dacity/ardacity-navbar","version":"0.1.0","description":"A customizable responsive navigation bar with Arweave wallet integration","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prebuild":"rimraf dist","build":"rollup -c","prepublishOnly":"npm run build"},"keywords":["arweave","wallet","navigation","navbar","react","tailwind","component","ardacity","web3"],"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","tailwindcss":">=3.0.0"},"dependencies":{"@ar-dacity/ardacity-wallet-btn":"^0.1.0"},"devDependencies":{"@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-node-resolve":"^13.3.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rimraf":"^3.0.2","rollup":"^2.79.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-typescript2":"^0.34.1","tailwindcss":"^3.2.0","typescript":"^4.9.0"},"author":{"name":"ArDacity"},"license":"MIT","publishConfig":{"access":"public"},"_id":"@ar-dacity/ardacity-navbar@0.1.0","gitHead":"d51949d2a6f5e03715cf51764a4d7abed1e76e49","_nodeVersion":"20.12.1","_npmVersion":"10.8.1","dist":{"integrity":"sha512-IabtBuMK+LPwLmT6kX/vWPhUDfhR5AYjnB8erTx62UhI0hCT/zLLei0insPUzyHEKuURfCWALbttXbXNTSmlrw==","shasum":"c1b12322c7739d273cfddc4a212e3bd0ea381729","tarball":"https://registry.npmjs.org/@ar-dacity/ardacity-navbar/-/ardacity-navbar-0.1.0.tgz","fileCount":8,"unpackedSize":94366,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDVh5dkpfy27bPWcCXgBRruJMoEUnk4QMW//lx/CjCZPwIhAN506+CbOR8JyCqLTjDI4QYjdlqaxkphjk6DL3mPMakB"}]},"_npmUser":{"name":"ruffledzest","email":"vibhanshalok@gmail.com"},"directories":{},"maintainers":[{"name":"ruffledzest","email":"vibhanshalok@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ardacity-navbar_0.1.0_1745273253603_0.9213682348499506"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-21T22:07:33.507Z","0.1.0":"2025-04-21T22:07:33.815Z","modified":"2025-04-21T22:07:34.030Z"},"maintainers":[{"name":"ruffledzest","email":"vibhanshalok@gmail.com"}],"description":"A customizable responsive navigation bar with Arweave wallet integration","keywords":["arweave","wallet","navigation","navbar","react","tailwind","component","ardacity","web3"],"author":{"name":"ArDacity"},"license":"MIT","readme":"# ArDacity NavBar\r\n\r\nA modern, responsive navigation bar component for React applications with Arweave wallet integration.\r\n\r\n## Features\r\n\r\n- 🎨 Multiple style variants (default, minimal, transparent, accent, glass)\r\n- 📱 Fully responsive design with mobile menu\r\n- 💰 Built-in Arweave wallet integration\r\n- ✨ Subtle animations and effects\r\n- 🌙 Dark mode compatibility\r\n- 🧩 Customizable with Tailwind CSS\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @ar-dacity/ardacity-navbar\r\n```\r\n\r\n## Usage\r\n\r\n```jsx\r\nimport { ArDacityNavBar } from '@ar-dacity/ardacity-navbar';\r\n// OR use default import\r\n// import ArDacityNavBar from '@ar-dacity/ardacity-navbar';\r\n\r\nfunction App() {\r\n  return (\r\n    <div>\r\n      <ArDacityNavBar \r\n        links={[\r\n          { label: 'Home', href: '/', isActive: true },\r\n          { label: 'About', href: '/about' },\r\n          { label: 'Projects', href: '/projects' },\r\n          { label: 'Contact', href: '/contact' }\r\n        ]}\r\n        showWalletButton={true}\r\n      />\r\n      \r\n      {/* Rest of your app */}\r\n      <main className=\"container mx-auto p-4\">\r\n        <h1 className=\"text-2xl font-bold\">Welcome to my dApp</h1>\r\n      </main>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n| Prop                 | Type                | Default         | Description                              |\r\n|----------------------|---------------------|-----------------|------------------------------------------|\r\n| `brand`              | ReactNode           | \"ArDacity\"      | Logo or brand element                    |\r\n| `links`              | Array               | []              | Navigation links                         |\r\n| `actions`            | ReactNode           | undefined       | Additional elements for the right side   |\r\n| `showWalletButton`   | boolean             | true            | Whether to show wallet connect button    |\r\n| `walletButtonProps`  | Object              | undefined       | Props for the wallet button component    |\r\n| `variant`            | string              | 'default'       | Navbar style variant                     |\r\n| `position`           | string              | 'sticky'        | Navbar position                          |\r\n| `className`          | string              | ''              | Additional CSS classes                   |\r\n| `mobileMenuClassName`| string              | ''              | Additional CSS classes for mobile menu   |\r\n| `themeColor`         | string              | undefined       | Custom theme color for accent variant    |\r\n\r\n## Variants\r\n\r\n### Default\r\nStandard white/dark navigation bar with subtle shadow on scroll.\r\n\r\n### Minimal\r\nTransparent navigation bar that adds a subtle background on scroll.\r\n\r\n### Transparent\r\nFully transparent navigation bar with no background.\r\n\r\n### Accent\r\nColored navigation bar using the primary theme color.\r\n\r\n### Glass\r\nModern glass-like effect with blur backdrop.\r\n\r\n## Examples\r\n\r\n```jsx\r\n// Glass variant\r\n<ArDacityNavBar \r\n  variant=\"glass\"\r\n  links={[/* your links */]}\r\n/>\r\n\r\n// Accent variant with custom color\r\n<ArDacityNavBar \r\n  variant=\"accent\"\r\n  themeColor=\"bg-purple-600\" \r\n  links={[/* your links */]}\r\n/>\r\n\r\n// Fixed position\r\n<ArDacityNavBar \r\n  position=\"fixed\"\r\n  links={[/* your links */]}\r\n/>\r\n\r\n// Custom brand/logo\r\n<ArDacityNavBar\r\n  brand={\r\n    <div className=\"flex items-center\">\r\n      <img src=\"/logo.svg\" alt=\"Logo\" className=\"h-8 w-auto\" />\r\n      <span className=\"ml-2 text-xl font-bold\">MyApp</span>\r\n    </div>\r\n  }\r\n  links={[/* your links */]}\r\n/>\r\n```\r\n\r\n## Tailwind CSS\r\n\r\nThis component is designed to work with Tailwind CSS. Make sure you have Tailwind CSS set up in your project.\r\n\r\n## License\r\n\r\nMIT ","readmeFilename":"README.md","_rev":"1-8f3eda72efcddd02d543f14237e45019"}