Загрузка...

React Toggled Sidebar Menu with Filters using MUI5 Drawer and Slider, Mapbox Geocoder address search

Responsive animated Side Navigation Bar in HTML CSS And JavaScript, Dashboard Sidebar Menu
This is the 12th part of our REACT Rooms Renting MERN Project. In this video we added the toggle side menu using Material UI5 Drawer with DrawerHeader in the same height of the navigation menu. And we added the price Slider Filter to filter the rooms depending on the price value. And we added Search box input to filter the rooms depending on city using Mapbox Geocoder input. And we combined both filters to be used together using a function to apply them in the same time according to the conditions.
Reactjs
Material UI5 (MUI5)
Mapbox Geocoder
SuperClusters
Slider
Drawer
DrawerHeader
Global Context
Reducer

The whole videos playlist of the project:
https://www.youtube.com/watch?v=ANZNMaBODDY&list=PLufbXXGswL_pS6rdWbDO56oiZovLWE_rs

Source code on github:
https://github.com/codelikepro22/place-to-stay/tree/part_12
00:00 Introduction
01:15 Building toggled sidebar Menu using MUI Drawer
06:18 Building Price Slider Filter
10:40 Building City Search input filter
18:06 Applying the filters using function applyFilter and temp array filteredRooms
25:29 Introduction into the upcoming video

Видео React Toggled Sidebar Menu with Filters using MUI5 Drawer and Slider, Mapbox Geocoder address search канала Code Like Pro
Яндекс.Метрика
Все заметки Новая заметка Страницу в заметки
Страницу в закладки Мои закладки
На информационно-развлекательном портале SALDA.WS применяются cookie-файлы. Нажимая кнопку Принять, вы подтверждаете свое согласие на их использование.
О CookiesНапомнить позжеПринять