Notification, Search and Menu Challenge

A simple notification panel with a sidebar menu built using HTML, CSS, and vanilla JavaScript.

Features

• Toggle search input visibility.
• Toggle sidebar menu visibility.
• Smooth animations for showing and hiding elements.

Preview

Setup

1. Clone the repository or download the source files.
2. Open index.html in your web browser to see the notification panel in action.

Files

• index.html: Contains the HTML structure of the notification panel and sidebar menu.
• styles.css: Contains the CSS styles for the notification panel, converted from LESS.
• scripts.js: Contains the vanilla JavaScript code for toggling the search input and sidebar menu.

How to Use

1. Search Input Toggle: Click on the search icon in the header to toggle the visibility of the search input.
2. Menu Toggle: Click on the menu icon in the header to toggle the visibility of the sidebar menu.

Customization

• Colors: Modify the CSS variables in styles.css to change the color scheme.
• Animations: Adjust the transition and animation properties in styles.css to customize the animations.
• Content: Update the HTML content in index.html to add more notifications or modify the existing ones.

Contributing

Contributions are welcome! Here are some ways you can contribute:

1. Report Bugs: If you find a bug, please report it by opening an issue.
2. Suggest Features: If you have a feature request, please let us know by opening an issue.
3. Improve Documentation: If you have suggestions for improving the documentation, please submit a pull request.
4. Submit Pull Requests: If you can fix a bug or implement a feature, please submit a pull request.

Steps to Contribute

1. Fork this repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes and commit them (git commit -am 'Add new feature').
4. Push to the branch (git push origin feature-branch).
5. Create a new Pull Request.