React Sidebar Navigation Menu Tutorial ๐Ÿคฉ [ Using Router + Frame-Motion ]

React Sidebar Navigation Menu Tutorial ๐Ÿคฉ  [ Using Router + Frame-Motion ]

Web site created using create-react-app

Link for the tutorial: https://youtu.be/6HfMm9D4jpU

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-sidebar.git

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๐Ÿ•’:

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 ]

Please support this channel by buying me a coffee๐Ÿฅฐ: https://www.buymeacoffee.com/CodeBucks

[๐ˆ ๐ฌ๐ญ๐ซ๐จ๐ง๐ ๐ฅ๐ฒ ๐ฌ๐ฎ๐ ๐ ๐ž๐ฌ๐ญ ๐ฒ๐จ๐ฎ ๐ญ๐จ ๐ฐ๐ซ๐ข๐ญ๐ž ๐œ๐จ๐๐ž ๐š๐ฅ๐จ๐ง๐  ๐ฐ๐ข๐ญ๐ก ๐ฆ๐ž ๐ฌ๐จ ๐ฒ๐จ๐ฎ ๐œ๐š๐ง ๐ฅ๐ž๐š๐ซ๐ง ๐ญ๐ก๐ž ๐Ÿ๐ฅ๐จ๐ฐ ๐จ๐Ÿ ๐œ๐ซ๐ž๐š๐ญ๐ข๐ง๐  ๐ญ๐ก๐ข๐ฌ]

๐—™๐—ผ๐—น๐—น๐—ผ๐˜„ ๐—บ๐—ฒ ๐—ผ๐—ป ๐Ÿ‘‡ ๐˜„๐—ต๐—ฒ๐—ฟ๐—ฒ ๐—œ'๐—บ ๐˜€๐—ต๐—ฎ๐—ฟ๐—ถ๐—ป๐—ด ๐—น๐—ผ๐˜'๐˜€ ๐—ผ๐—ณ ๐˜‚๐˜€๐—ฒ๐—ณ๐˜‚๐—น ๐—ฟ๐—ฒ๐˜€๐—ผ๐˜‚๐—ฟ๐—ฐ๐—ฒ๐˜€! ๐ˆ๐๐’๐“๐€๐†๐‘๐€๐Œ ๐Ÿ“ซ: https://www.instagram.com/code.bucks

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โฃ๏ธ: https://youtu.be/aAEfBxcGpJ8

If you want to learn Redux as a beginner here is Tutorial for you ๐Ÿ’–: https://youtube.com/playlist?list=PLjxZxD6BDkeYHNuoy6nX2KS4468C2neHS

Build Devto Clone in React: https://youtube.com/playlist?list=PLjxZxD6BDkebDKxYH4El8P4Obb5VzcGlX

Build Awesome stuff with ReactJs (Playlist) : https://youtube.com/playlist?list=PLjxZxD6BDkebOPXoqccGpiinfdY9zybXm

React Advanced Topic (Playlist) : https://www.youtube.com/playlist?list=PLjxZxD6BDkeZoRU6v7gMyQ7BirGD6u0Lt

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

Thank You for watching! ๐Ÿ˜‰

Buy me a coffee and Support this channel๐Ÿฅฐ: https://www.buymeacoffee.com/CodeBucks

Where else you can find me: ๐“๐–๐ˆ๐“๐“๐„๐‘ ๐Ÿค : https://twitter.com/code_bucks ๐ˆ๐๐’๐“๐€๐†๐‘๐€๐Œ ๐Ÿ“ซ: https://www.instagram.com/code.bucks ๐„๐Œ๐€๐ˆ๐‹ ๐Ÿ“ง: [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

react javascript web-development developer css node

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Node JS Development Company | Hire Node.js Developers

Looking to hire Node js developers? One of the top Node js development companies in India & USA offers cost-effective Node js web development services.

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Hire Top Node JS Developers | Best Node.js Development Company India

Hire dedicated Node JS developers & programmers in India for custom full-stack NodeJS web development projects on hourly/full-time basis. Strict NDA, 16+ years exp & 2500+ clients|450+ Experts

Node JS Development Company| Node JS Web Developers-SISGAIN

SISGAIN is the top rated node js development company providing professional services on node js web and mobile development.