Дизайн меню
Scope of Work:
Menu Design:
Create a hamburger icon in the top-left corner (or as per the website's layout) that triggers the menu on click.
Implement a flyout menu that slides in from the left side, covering part or the entire screen as per the Youla.ru menu style.
Ensure the menu includes:
Categories with expandable/collapsible subcategories.
Links to main site sections (e.g., "Profile," "Favorites," "Messages").
A prominent "Post an Ad" button styled distinctly (e.g., highlighted or with a different background color).
Functionality:
Dynamic Category Loading:
Fetch categories and subcategories dynamically from the database using Laravel models.
Support multi-level categories with recursive rendering.
Active State Highlighting:
Highlight the currently active menu item to indicate the user's location within the site.
User Personalization:
Show personalized elements like the user's profile picture and name (if logged in).
Include a "Login/Sign Up" button for unauthenticated users.
Responsive Design:
Ensure the menu is fully responsive:
For desktop, it can act as a side panel or a full-screen overlay.
For mobile, it should occupy the entire screen with easy-to-click elements.
Smooth Animations:
Add smooth opening and closing animations using CSS and/or JavaScript.
Ensure no performance lags, especially on mobile devices.
UI/UX Considerations:
Mimic the clean, modern look of Youla.ru.
Use a consistent color scheme that aligns with the current site's design.
Technical Requirements:
Backend:
Use Laravel routes and controllers to fetch menu data.
Provide an API endpoint for dynamic category loading if using an AJAX-based approach.
Frontend:
Utilize Vue.js or a similar framework (if already part of the project) for dynamic interactivity.
If Vue.js is not used, implement functionality with vanilla JavaScript or jQuery.
CSS:
Write modular and reusable styles using CSS/SCSS.
Follow BEM methodology for class naming (if applicable).
Error Handling:
Цена обсуждаемая.
Display a user-friendly message or fallback menu in case of data fetching errors.
Ensure menu functionality is accessible even if JavaScript fails.
Testing:
Perform cross-browser testing (Chrome, Firefox, Safari, Edge).
Test responsiveness on various devices (desktop, tablet, mobile).
Ensure smooth performance on low-end devices.
Deliverables:
Fully functional hamburger menu integrated into the Laravel site.
Modular code (both frontend and backend) with appropriate comments and documentation.
Responsive design tested and optimized for all devices.
Deployment-ready files pushed to the version control system (e.g., Git).
A short guide on how to manage menu content (e.g., adding/removing categories).
Timeline:
Please complete the task within 5 business days, ensuring sufficient time for testing and revisions
Menu Design:
Create a hamburger icon in the top-left corner (or as per the website's layout) that triggers the menu on click.
Implement a flyout menu that slides in from the left side, covering part or the entire screen as per the Youla.ru menu style.
Ensure the menu includes:
Categories with expandable/collapsible subcategories.
Links to main site sections (e.g., "Profile," "Favorites," "Messages").
A prominent "Post an Ad" button styled distinctly (e.g., highlighted or with a different background color).
Functionality:
Dynamic Category Loading:
Fetch categories and subcategories dynamically from the database using Laravel models.
Support multi-level categories with recursive rendering.
Active State Highlighting:
Highlight the currently active menu item to indicate the user's location within the site.
User Personalization:
Show personalized elements like the user's profile picture and name (if logged in).
Include a "Login/Sign Up" button for unauthenticated users.
Responsive Design:
Ensure the menu is fully responsive:
For desktop, it can act as a side panel or a full-screen overlay.
For mobile, it should occupy the entire screen with easy-to-click elements.
Smooth Animations:
Add smooth opening and closing animations using CSS and/or JavaScript.
Ensure no performance lags, especially on mobile devices.
UI/UX Considerations:
Mimic the clean, modern look of Youla.ru.
Use a consistent color scheme that aligns with the current site's design.
Technical Requirements:
Backend:
Use Laravel routes and controllers to fetch menu data.
Provide an API endpoint for dynamic category loading if using an AJAX-based approach.
Frontend:
Utilize Vue.js or a similar framework (if already part of the project) for dynamic interactivity.
If Vue.js is not used, implement functionality with vanilla JavaScript or jQuery.
CSS:
Write modular and reusable styles using CSS/SCSS.
Follow BEM methodology for class naming (if applicable).
Error Handling:
Цена обсуждаемая.
Display a user-friendly message or fallback menu in case of data fetching errors.
Ensure menu functionality is accessible even if JavaScript fails.
Testing:
Perform cross-browser testing (Chrome, Firefox, Safari, Edge).
Test responsiveness on various devices (desktop, tablet, mobile).
Ensure smooth performance on low-end devices.
Deliverables:
Fully functional hamburger menu integrated into the Laravel site.
Modular code (both frontend and backend) with appropriate comments and documentation.
Responsive design tested and optimized for all devices.
Deployment-ready files pushed to the version control system (e.g., Git).
A short guide on how to manage menu content (e.g., adding/removing categories).
Timeline:
Please complete the task within 5 business days, ensuring sufficient time for testing and revisions