🎯 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

# Using npm
npm install react-navbar-ks

# Using yarn
yarn add react-navbar-ks

💻 Usage

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 - UI library
• Tailwind CSS - For styling
• TypeScript - Type safety
• Lucide Icons - For beautiful icons
• React Router - For navigation handling
• 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
• Email: [email protected]
• LinkedIn: @sankarkumarkathirvel

Made with ❤️ by Sankarkumar Kathirvel