https://github.com/yashi-singh-1/day-07-notifications-search-and-menu
The three cornerstones of any application? Brought together in the smallest possible space.
https://github.com/yashi-singh-1/day-07-notifications-search-and-menu
css css3 front-end front-end-challenge front-end-development frontend frontenddevelopment html html5 javascript
Last synced: 3 months ago
JSON representation
The three cornerstones of any application? Brought together in the smallest possible space.
- Host: GitHub
- URL: https://github.com/yashi-singh-1/day-07-notifications-search-and-menu
- Owner: Yashi-Singh-1
- Created: 2024-06-19T18:37:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-19T18:38:59.000Z (over 1 year ago)
- Last Synced: 2024-11-10T11:15:24.564Z (11 months ago)
- Topics: css, css3, front-end, front-end-challenge, front-end-development, frontend, frontenddevelopment, html, html5, javascript
- Language: CSS
- Homepage:
- Size: 60.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.