React Sidebar Navigation using Framer Motion | Beginners React Tutorial

Learn how to make a React Js Sidebar Navigation Menu | Beginner Friendly Tutorial | We will be using React Icons ,Framer Motion and React Router v6
in this project . You will be able to open and close the sidebar menu with a simple click and you can easily add this to any of your React websites.
Source Code For React Sidebar Menu - github.com/anshuopinion/react...
React Sidebar using framer motion , React Sidebar Animation ,React Icons
React Framer motion Project , React Router Dom Navigation

[@oscar_cornejo]

What a great job! Continue with more videos about Framer-Motion! 🙌

[@timothyvandeweerd946]

Thank you so much, it was exactly what I was looking for. I appreciate your assistance.

[@theREMASTEREDone]

thanks this was great,even if you dont speak English, your easy to follow

[@swatisharma-qx5xs]

Finally I get the superb video to design a navbar.... thank you so much sir❤

[@Avichai997]

thank you so much man!
i was exactly what i needed in my work and way better then i can imagine!
even though i dont understand hindi you was very clear

[@dosomecoding]

Thanks man

[@coreydevl7021]

Caraio mano ...eu nao entendi nada que tu falou.... mas ficou funcionando igualzinho!!!! Hatamahata pra vc também meu amigo! Thank you so much!

[@nicks_me]

tanks dude, u are like a React god

[@succeedwithuttam2271]

Good one bro!! All the best.

[@acmeacademiccouncilofmecha7569]

You are the only one whose code is functional

[@NeerajKumar-wk4qq]

sir your videos provide us the practical knowledge, Thank you

[@rp2804]

Good that u focus on actual logic

[@shivamroy6399]

Awesome

[@smarthood_tamil]

Super all the best ✨

[@segunadelanwa1632]

Thanks for this i really appreciate

[@sagarpatel210]

i wnat to work on dashboed which component should i work

[@shashankyadav866]

great job, nice content very helpful

[@virtualinstituteofcs_VICS]

bro make a full tutorial on framer motion with react and how to use it etc tell every thing your way is cool ❤❤

[@shreyashpandey4603]

Once I was done with the development I am facing a Console Warning as - Invalid aria prop `aria-description` on tag.
Kindly help !!

[@ismaeladriannnn]

Hi, the titles are not appearing beside the sidebar but inside the sidebar at the bottom. I would like to know the reason of that. Thanks

[@MritunjayKumar-gl9zs]

Very good video for side bar

[@badbrother_2023]

I don't even speak Hindi but I finished the whole thing and coded everything thank you so much.

[@dosomecoding]

Great dedication 👏

[@user-eg7ok9yq2t]

add the navbar and one starter page so we can continure this as the starter template

[@mr.shoaibmalik2488]

Awesome bro💚

[@momscookingrecipes6136]

Thank you so much bro

[@waqastahir1251]

very helpfull video

[@oxanasf6369]

Thank you!

[@shishirdonde]

Great presentation.
How to connect with you for a project discussion

[@DashFactsCentral]

must video bhai, maza aa gya

[@dosomecoding]

Thanks bhai

[@s.hariharanreddy5439]

brother how can I hide this sidebar completely, when I'm in login page as it is over the routes, and I cannot link another component outside of routes....PLEASE HELP!!

[@DProgram-xb9pp]

Appreciate

[@hardcode6372]

Great tutorial , if possible please make video on role based dynamic sidebar nested menu + sub menu using API.

[@dosomecoding]

Okay

[@pavan9840]

thanks bhai

[@MukeshKumar-sq2ri]

great

[@masudrana_360]

once more bro !!

[@shubhamjha2256]

When I add content to my page and when I scroll it the icons are also getting scrolled I want sidebar to be fixed how to do it

[@saxenabhavesh6941]

Bro ye theme konsa hai plz bta do

[@mdahsanekram800]

Please help for sub menu in sideBar in same

[@birgaripkul1612]

Great, does it slide or move to right?

[@dosomecoding]

Yeah just change postion from left right
In framer

[@jumamwandogo8932]

What if I want my first page to be when open project Tobe login followed by that dashboard how can I add login component

[@jumamwandogo8932]

Please help anyone

[@emekadaniel5495]

thanks baba mi

[@rajeshchitikela5847]

I love you

[@akshayavaidya3904]

react and react Dom version your are using??

[@dosomecoding]

17

[@dosomecoding]

New version released 18

[@jasoncarzano9388]

what if i scroll down to see other contents below . Does the sidebar's position is fixed?

[@dosomecoding]

You can modify as per your requirements

[@gabs9324]

can you help me? when i try to add the justify content in my home screen nothing happen, but when i remove the main-container works

[@dosomecoding]

What help ?

[@gabs9324]

@@dosomecoding i cant use justify content on home screen, all texts get stuck in the corner

[@soya491]

Map method not a return but inside the div and navlink

[@dosomecoding]

Issue ?

[@soya491]

@@dosomecoding yes map method is not return ( )

[@dosomecoding]

Without returning react will not render ui

[@vivekanandareddymaddela]

How to create authguard such that only after successful login this dashboard appears . Else stays at login form for this dashboard video . Kindly explain

[@dosomecoding]

I have created video on it ruclips.net/video/phaARbflXx8/видео.html

[@dosomecoding]

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

[@vinodonweb]

icon not showing I trying to solve this error but not showing icons or name

[@dosomecoding]

Push your code to GitHub and share repo link

[@shahhussain56]

Which vscode are you using bro

[@dosomecoding]

there is only one vs code

[@anukulmoon2582]

how do i add other routes without sidebar?

[@dosomecoding]

Check menu navigation video
For adding new route just edit json object

[@aadiguru6382]

is it responsive also ?

[@dosomecoding]

it's already responsive

[@lakshit6429]

Is it mobile responsive as well?

[@dosomecoding]

Yes

[@ShubhamKumar-gy7oi]

After clicking on order it showing text 'orders'
But my error is
While applying css on text 'order'
Background -green,
Width -100vh, // it's not covering full-screen it only covering half of the screen ans rest is showing white colour
Please help me because I am using side bar in my project

[@dosomecoding]

Inspect css code

[@ShubhamKumar-gy7oi]

@@dosomecoding
I wrote all code also but in that also same error
so i tried once more without any doing changes(copy-paste from video)
still cant resolve.
but while typing text its covering full screen.
--------------------------------------------------------------------------
App.js
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Sidebar from "./app/components/Sidebar";
import Home1 from "./app/pages/Home1";
import Home2 from "./app/pages/Home2";
import Home3 from "./app/pages/Home3";
import Home4 from "./app/pages/Home4";
import Home5 from "./app/pages/Home5";
import Home6 from "./app/pages/Home6";
import Home7 from "./app/pages/Home7";
import Home8 from "./app/pages/Home8";
import Home9 from "./app/pages/Home9";
import './App.css';
function App() {
return (
















)
}
export default App;
---------------------------------------------------------------------
App.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sidebar{
background: rgb(0,7,61);
color: white;
height: 100vh;

}
.main-container{
display: flex;
}
-----------------------------------------------------------------
Sidebar.jsx
import { motion } from 'framer-motion'
import '../../App.css';
const Sidebar = ({children}) => {
return (


{children}

)
}
export default Sidebar
----------------------------------------------------------------------------
Home1.jsx
import React from 'react'
import '../../App.css'
function Home1() {
return (
Home1
)
}
export default Home1;

[@ShubhamKumar-gy7oi]

@@dosomecoding i did tryed css but unable to do it could you help me please

[@mdpiash4616]

Bro need help how I can contact with you?

[@dosomecoding]

Message me on linkdin

[@dosomecoding]

linkedin/in/anshuopinion

[@sushilsaini1341]

sub routes not visible, how to?

[@dosomecoding]

Please message me on linkedin

[@nidhiullangi4349]

nai horeeeeyyyyyyyyyy

[@raviiirathore9984]

Bro meri react ki website pr : hover kaam nhi kr rha h, main jaise css me krte the, waise hi kr rha hu lekin kaam nhi kr rha h...
help me

[@dosomecoding]

Kam karna to chiye

[@raviiirathore9984]

@@dosomecoding
Bro Hover pr color change ho jaye, iske liye bhi kya UseState() hook karna hoga kya...?

[@coreydevl7021]

Caraio mano ...eu nao entendi nada que tu falou.... mas ficou funcionando igualzinho!!!! Hatamahata pra vc também meu amigo! Thank you so much!