React Sidebar Navigation Menu Tutorial 🤩 [ Using Router + Page Transition with Frame-Motion ]

Опубликовано: 26 Май 2021
на канале: CodeBucks

21,403

467

Build Sidebar navigation menu in ReactJS with react router and framer-motion for cool page transition effects😇

Demo Link🖤: https://react-sidebar.vercel.app/

Hi there 👋,

In this video we're going to build cool react sidebar using react-router and framer-motion.

(Make sure to install all the required files 👇)

Starter-Code Files👇:
Write this whole line in your command Prompt,
git clone --single-branch --branch starter-code https://github.com/codebucks27/react-...

For this project we're going to use,
▶️ React Hooks
▶️ Styled-components
▶️ React-router-dom
▶️ Framer-motion

Don't forget to watch whole videos, we're going to learn a lot of stuff like,
▶️ React Hooks
▶️ Creating hamburger menu effect purely in css
▶️ How we can leverage advantages of react router (Navlink)
▶️ How to use Framer-motion for page transition animation

TimeStamps🕒:

Channel Intro: @0:00:00
Demo: @0:00:10
Installation & Setup: @0:01:00
Initial cleaning and styling: @0:04:00
Building Sidebar Component: @0:08:15
Add more pages to navigate : @0:50:58
Adding Router : @0:52:10
Let's add Framer-motion: @1:03:48

Watch whole video in order to understand so that you can easily build and customize sidebar on your own projects and also learn page transition using framer-motion and react-router.

[ Note🙏 : Sorry for few glitches in the video I have to reconfigure OBS settings to record quality video ]

[𝐈 𝐬𝐭𝐫𝐨𝐧𝐠𝐥𝐲 𝐬𝐮𝐠𝐠𝐞𝐬𝐭 𝐲𝐨𝐮 𝐭𝐨 𝐰𝐫𝐢𝐭𝐞 𝐜𝐨𝐝𝐞 𝐚𝐥𝐨𝐧𝐠 𝐰𝐢𝐭𝐡 𝐦𝐞 𝐬𝐨 𝐲𝐨𝐮 𝐜𝐚𝐧 𝐥𝐞𝐚𝐫𝐧 𝐭𝐡𝐞 𝐟𝐥𝐨𝐰 𝐨𝐟 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐭𝐡𝐢𝐬]

𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲 𝗼𝗻 👇 𝘄𝗵𝗲𝗿𝗲 𝗜'𝗺 𝘀𝗵𝗮𝗿𝗶𝗻𝗴 𝗹𝗼𝘁'𝘀 𝗼𝗳 𝘂𝘀𝗲𝗳𝘂𝗹 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀!
Twitter🐤 :   / code_bucks
LinkedIn 🔗:   / codebucks
Instagram 📫:   / code.bucks
Email 📧: [email protected]

In upcoming videos, I'm going to create lots of cool stuff with JavaScript and react so make sure to subscribe.

Like, Sub🥂 & Share! ♥

Learn More About,

Build Responsive website with ReactJS, Styled-Components & GSAP❣️:
   • React Website🤩 : Build Responsive web...

If you want to learn Redux as a beginner here is Tutorial for you 💖:
   • React Redux Tutorial for beginners

Build Devto Clone in React:
   • Build Dev.to Clone in React

Build Awesome stuff with ReactJs (Playlist) :
   • Build with ReactJs

React Advanced Topic (Playlist) :
   • React Advanced Concepts | Every React...

If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below.

Thank You for watching! 😉

Music Credits🎵:

Toonorth - Far From Home https://chillhop.com

No Spirit - Forest Lake Walk https://chillhop.com

No Spirit - Leaves covered by snow https://chillhop.com

Mama Aiuto - Small Town Palm Trees https://chll.to/10023c1e

Ezzy - Focus https://chll.to/cbcd0a55

Get more awesome music from https://chillhop.com

Where else you can find me:
Twitter🐤 :   / code_bucks
LinkedIn 🔗:   / codebucks
Instagram 📫:   / code.bucks
Email 📧: [email protected]

Disclaimer:
All videos are for educational purpose and use them wisely. Any Resources used in this video are for educational purpose only.

#ReactSidebar
#SidebarinReactJS
#ReactSidebarMenu