React Animated Sidebar Indicator | ReactJS Sidebar | ReactJS SASS

React Animated Sidebar Indicator | ReactJS Sidebar | ReactJS SASS
In this video, we are going to make sidebar with animated indicator in ReactJS.
Don't forget to click the like button and share the video with your friends if you found the video useful.
Make sure to SUBSCRIBE for more AWESOME videos like this!
🔴 STARTER REPO
github.com/trananhtuat/animat...
🔴 CONTACT
Facebook: / trananh2001
Github: github.com/trananhtuat
🔴 TIMESTAMP
00:00 - Demo
00:09 - Setup project
01:07 - Make app layout
04:47 - Make sidebar
🔴 SOURCE CODE
github.com/trananhtuat/animat...
🔴 REFERENCE
- Create react app: create-react-app.dev/
- SASS: sass-lang.com/
- Boxicons: boxicons.com/
- Figma: www.figma.com/
- Google font: fonts.google.com/
🔴 MORE AWESOME VIDEOS
/ tuattrananh
--------------------------
#tuattrananh #ReactJS #SASS #Sidebar #AnimatedSidebar #ReactSidebar #AdminDashboard #adminpanel #reactadmin #HTML #CSS #JavaScript #SCSS #React

[@anuj7286]

Great tutorial, thanks!

[@solaaar3]

great tutorial, u deserve more subscribers, keep doing that good work!yo

[@tuattrananh]

Thank you ❤️

[@shinshinremix6324]

video hay. mong bạn ra nhiều video hơn nữa

[@tuattrananh]

❤❤❤❤

[@TinhNguyen-ii9zy]

videos hay đấy. sao bạn ko vừa làm vừa nói luôn cho mn dễ hiểu. cám ơn bạn đã chia sẽ video bổ ích

[@forexlearningwithkhizarhay3952]

is this sidenav responsive too ?

[@ai-oo9ls]

làm theo cách này nếu muốn chọn 1 cái nhưng không muốn nó chuyển trang thì làm sao a

[@wrecktorestore1780]

hi sir, its very helpful to my project, I need some dropdown in this side bar, can you please share some relevant code for dropdown in side bar option.

[@tuattrananh]

ruclips.net/video/XwnZLgIfIvg/видео.html

[@TSGGaming7803]

bro can u make themes for blogger plz can u drop some theme for bloggers

[@sourishw.5865]

What is the license for the tutorial you provide? May I use this in my project? (Are you releasing under MIT license?)

[@tuattrananh]

You can use this free

[@sourishw.5865]

@@tuattrananh Thank you so much!

[@NhatNguyen-ej6ls]

mấy video sau anh kết hợp thêm mấy cái loading cho đẹp

[@tuattrananh]

👌👌👌👌

[@juniorsemerzier660]

Tuat Tran Anh, i am a fan of your works. How about to make a menu with submenu!

[@luantran7118]

trong video react dashboard admin của a cũng có đoạn tương tự chỗ làm cho nó active dựa theo route ý a, có đoạn:
const Sidebar = props => {
const activeItem = sidebar_items.findIndex(item => item.route === props.location.pathname)
return (




{
sidebar_items.map((item, index) => (



))
}

)
}
e ko hiểu chỗ item.route === props.location.pathname, chỗ props.location.pathname thì props này lấy ở đâu a, lấy từ layout.jsx của a ạ?
const Layout = () => {
const themeReducer = useSelector(state => state.ThemeReducer)
const dispatch = useDispatch()
useEffect(() => {
const themeClass = localStorage.getItem('themeMode', 'theme-mode-light')
const colorClass = localStorage.getItem('colorMode', 'theme-mode-light')
dispatch(ThemeAction.setMode(themeClass))
dispatch(ThemeAction.setColor(colorClass))
}, [dispatch])
return (

(









)}/>

)
}

[@tuattrananh]

đúng rồi em, ở đoạn này , props lấy từ thằng Route nên trong nó có location

[@luantran7118]

@@tuattrananh có cách nào khác ko a nhỉ, ví dụ đặt id cho từng thằng có route đó, nếu id trùng thì nó active, e cũng làm như a nhưng hiện tại nó báo undefine ko tìm dc, có thể do e config route ko giống a. Chỗ Sidebar e ko nhận prop ở layout, mà e chỉ có chỗ sidebarItem nhận props từ Sidebar

[@duongthainhat7290]

em xin extension VS code gõ nhanh 'rafe' là ra cái khung component luôn ạ

[@tuattrananh]

ES7+ React/Redux/React-Native snippets

[@littleerror6501]

not a responsive sidebar...