# 🎯 React Responsive NavBar KS

A modern, animated responsive navigation bar component built with React, TypeScript, and Tailwind CSS.

## ✨ Features

- 📱 Responsive mobile-first design with hamburger menu
- 🔍 Integrated animated search functionality
- 🎨 Beautiful glass-morphism UI design
- 🎯 TypeScript support for type safety
- 🌊 Smooth transitions and hover effects
- ⚡ Optimized performance with React.memo
- 🎪 Interactive state management
- 📦 Easy to integrate and customize

## 🚀 Installation

```bash
# Using npm
npm install react-navbar-ks

# Using yarn
yarn add react-navbar-ks
```

## 💻 Usage

```tsx
import { NavBar } from 'react-navbar-ks';

function App() {
  const navItems = [
    { name: 'Home', path: '/' },
    { name: 'About', path: '/about' },
    { name: 'Contact', path: '/contact' }
  ];

  const handleSearch = (query: string) => {
    console.log('Searching for:', query);
  };

  return (
    <NavBar 
      items={navItems}
      onSearch={handleSearch}
    />
  );
}
```

## 🛠️ Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | `Array<{ name: string, path: string }>` | `[]` | Navigation items to display |
| `onSearch` | `(query: string) => void` | `undefined` | Callback when search changes |
| `className` | `string` | `''` | Additional CSS classes |

## 🎨 Features in Detail

### Responsive Design
- Mobile-first approach
- Hamburger menu for mobile views
- Smooth transitions between mobile/desktop layouts
- Optimized touch targets for mobile

### Search Functionality
- Animated search input
- Expandable search bar
- Real-time search feedback
- Debounced search handling

### UI/UX
- Glass-morphism effects
- Hover and active states
- Focus states for accessibility
- Clean, modern design

## 🔧 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## 📦 Dependencies

- React 16.8+ (for Hooks)
- Tailwind CSS 3.0+
- TypeScript 4.0+

## 🤝 Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 📝 License

Distributed under the MIT License. See LICENSE for more information.

## 🙏 Credits

- [React](https://reactjs.org/) - UI library
- [Tailwind CSS](https://tailwindcss.com/) - For styling
- [TypeScript](https://www.typescriptlang.org/) - Type safety
- [Lucide Icons](https://lucide.dev/) - For beautiful icons
- [React Router](https://reactrouter.com/) - For navigation handling
- [React Memo](https://react.dev/reference/react/memo) - For performance optimization

## Special Thanks

Special thanks to all the open-source contributors and the amazing developer community for their continuous support and inspiration.

## 🐛 Bug Reports

Found a bug? Please create an issue with:
1. Bug description
2. Steps to reproduce
3. Expected vs actual behavior
4. Browser and OS details

## 📞 Support

- GitHub Issues: [Create an issue](https://github.com/sankarkumark34/react-custom-navbar)
- Email: ksankarkumar34@gmail.com
- LinkedIn: [@sankarkumarkathirvel](https://www.linkedin.com/in/sankarkumarkathirvel/)

---

Made with ❤️ by Sankarkumar Kathirvel