awesome sidebar :) but i would chage all the PX stylings into Rem for people with scrolling problems: insteat of position: absolute use fixed. for the tooltips also dont use position,top,left and transform. move the tooltip span into the and in css just add margin-left: 1rem;
I'm wondering, do you keep the nav absolute, don't allow the body to scroll, but allow main-content to scroll with overflow? I think google analytics does something like this.
Man this tutorial is awesome! Currently I did a backend application, and I am not very familiar to the frontend development, therefore my server looks awful... But with this tutorial my server looks much much better in an instant. I´ve learned a lot with this video about div, classes and ids, now I am testing new views, thanks a lot again!!
Slight modification that I did to the styling for my specific use case. Since we are setting the nav-item name's opacity to 0, when collapsed, hovering above its position will trigger the tooltip. This took care of that: .sidebar .nav-item { display: none; } .sidebar.active .nav-item { display: inline-block; } My nav-item texts are long, so when the tooltip was being triggered, it would keep the 80px as width and increasing the width would increase all the tootips. This will help with the dynamic width, plus it helped with alignment: .sidebar ul li .tooltip { position: fixed; ... display: none; } .sidebar ul li:hover .tooltip { display: inline; } Hope this helps anyone who was experiencing the same issues!
wait up , just because u changed the opacity to 0 it means its just hidden i try to add like a container on the right side it will definetly effect the positioning of the main container , u should make those changes as well i think display none will work instead.
somebody please help me my toglle bar dont want to closed, idk why cause im newbie at coding. please help me i cant put main content. if i put it the toggle bar is doesnt wanna closed. im so sory for my english cause iknow it worst
Hey hi, I have a website which is made by html css and js but I want to show that website in desktop view for all devices. Will you plz make a video on this topic or can you please share the code of desktop view for all devices.
dear sir , thanks so much for your effort 😊😊, need help for something if i need to move this project from left to right view , what i need to change in code
I am facing a problem. Whenever I add a space in the text of tooltip or the nav-item like "Add Question" the tooltip keeps shrinking even if I increase the width or som,ething it remain the same. Could you look into it
In react app Tailwind css classes doesn't work when I pass through props in component as bgc="red" -> className={`bg-${props.bgc}-500`} but work if I pass whole class name like "bg-red-500" One more thing if I use cdn link of tailwind css then it works but not with installed tailwind css I've read somewhere that tailwind doesn't support dynamic classes it compile only given classes... What to do Please reply . . .
Could you make a ecommerce shop from top to bottom with built in stripe api maybe? Nextjs and tailwindcss with the new 13v of nextjs with font optimization etc?
@@JJ25Flo next js is a react framework my guy with alot more advantage over pure react. next js handles routing by default, increase SEO which helps to increase search index along and with many more stuff
Hi guys, I'm having challenge here, I'm getting this error: Uncaught TypeError: Cannot set properties of null (setting 'onclick') After adding this code piece: let btn = document.querySelector('#btn'); let sidebar = document.querySelector('.sidebar'); btn.onclick = function () { sidebar.classList.toggle('active'); }; What could be the problem.
make sure the script block is inserted after the body end tag but before the end html tag . This way all the html elements will be loaded before the script.
Plzz make ecommerce project in tailwind css with Redux toolkit plz bro becuz there is no ecommerce project in your channel so am waiting for your response
@codecommerce, the .sidebar.active ~ .main-content is not working for me :") I hope you can explain more about the .sidebar.active. from my understanding, .notation is used to access class but this time, you have .active. so it's different
Jesus Christ, absolutely stunning as a beginner. Thank you so much, for your extraordinary and well explained content.
awesome sidebar :) but i would chage all the PX stylings into Rem
for people with scrolling problems:
insteat of position: absolute use fixed.
for the tooltips also dont use position,top,left and transform.
move the tooltip span into the and in css just add margin-left: 1rem;
I'm wondering, do you keep the nav absolute, don't allow the body to scroll, but allow main-content to scroll with overflow? I think google analytics does something like this.
Man this tutorial is awesome! Currently I did a backend application, and I am not very familiar to the frontend development, therefore my server looks awful... But with this tutorial my server looks much much better in an instant. I´ve learned a lot with this video about div, classes and ids, now I am testing new views, thanks a lot again!!
man i was searching for something like this, you have no idea how long i search and now i finally learn, i am learning on my own tks man god bless you
Slight modification that I did to the styling for my specific use case.
Since we are setting the nav-item name's opacity to 0, when collapsed, hovering above its position will trigger the tooltip.
This took care of that:
.sidebar .nav-item {
display: none;
}
.sidebar.active .nav-item {
display: inline-block;
}
My nav-item texts are long, so when the tooltip was being triggered, it would keep the 80px as width and increasing the width would increase all the tootips.
This will help with the dynamic width, plus it helped with alignment:
.sidebar ul li .tooltip {
position: fixed;
...
display: none;
}
.sidebar ul li:hover .tooltip {
display: inline;
}
Hope this helps anyone who was experiencing the same issues!
Wow! Thanks for sharing! I had the same issue when adding space on nav text (2 words).
lot's tutorial on this topic.. but unique in this channel is that with voice guide.. which is very important and also helpful..
Thanks a ton
Video ini sangat membatu saya sebagai pemula rpl, sangat mudah dipahami sekali, sukse selalu bang CC💪💪
wait up , just because u changed the opacity to 0 it means its just hidden i try to add like a container on the right side it will definetly effect the positioning of the main container , u should make those changes as well i think display none will work instead.
When i go to another site and the sidebar is not active, or the other way, how can i keep it?
somebody please help me my toglle bar dont want to closed, idk why cause im newbie at coding. please help me i cant put main content. if i put it the toggle bar is doesnt wanna closed. im so sory for my english cause iknow it worst
Nice and clean Explanation, thanks for your efforts
Being a very beginner this is just what i was looking for!
However can't get de script working when clicking on btn
Great. How do we add pages though for each one?
I am having an issue, when i'm adding container div and set the property as in video, i can see horizontal scrollbar
Your explanations were very clear. Thank you! Can't wait to see more tutorials on your channel. ❤❤ Love from India..
Thank you so much!
Nice explanation sir
❤thanks for sharing
Amazing sir 🎉🎉🎉 🙏🙏
I'd love to see how to make this kind of side bar in react. I've tried recreating and think im close. But would love to see how you do it.
26:00 excellent 👌👍
Hey hi, I have a website which is made by html css and js but I want to show that website in desktop view for all devices. Will you plz make a video on this topic or can you please share the code of desktop view for all devices.
This is amazing! Really helped!!
Manually opening and closing it doesn't mean it's responsive... it needs to automatically pick the state based on screen size
How did you get your window controls next to the tabs on your mac?
Can you please extend this for mobile view, where sidebar will open on top of main content
fire and excellent Approach
awesome video. saved my life
@Code Commerce if side menu scroll added in the sense pop-up values are hiding behind the screen can you please help me regarding this?
Brother, one issue, when i resize the height of the window, it clips the bottom menu links. Any fix?
Amazing stuff as always!
Thank you Yahya!
Thanks for the tutorial bro!
One question, how to make a dropdown on the sidebar?
Thank you for this bro!
how did you get the divs to fall under each other when writing .sidebar on css?
Awesome work
How do I add a toogle button??
youbare awesome.... ❤️🔥
please bring big reactjs project which covers everysingle concept of reactjs 🔥
dear sir , thanks so much for your effort 😊😊, need help for something if i need to move this project from left to right view , what i need to change in code
In the sidebar styling, so .sidebar {...}, instead of having left: 0; do right: 0;
Also, you will need to adjust all the other stylings to the right
I’m having issues with the overlay contents for each sidemenu item
Where do I place the divs
Do u plan doing that in react js it would be perfect. Also u can show method how to integrate these components irl projects.
Great work 👏
I have a problem with my image, it has the shape of an ellipse instead of circle
I also have this issue when I collapse it
Square the image.
make sure the .user-img css width matches the height.
Thank you for teaching me
I am facing a problem. Whenever I add a space in the text of tooltip or the nav-item like "Add Question" the tooltip keeps shrinking even if I increase the width or som,ething it remain the same. Could you look into it
replace opacity: 0 to display: none and opacity: 1 to display: inline
Thank you so muchhhh saved my life :D
Glad it helped!
Thank you so much!!
Çok teşekkür ediyorum sağ ol.
Thank you very much mannnn
you didnt mention when it will goes on mobile how it will behave?
Good stuff. Its a sub.
Lets see what other goodies you have on the channel.
Thanks dude!
awesome video, thank you. One question: how can we make this sidebar sticky so that it is visible when you scroll the page?
css - .sidebar {
position: fixed;
}
In react app Tailwind css classes doesn't work when I pass through props in component as bgc="red" -> className={`bg-${props.bgc}-500`} but work if I pass whole class name like "bg-red-500"
One more thing if I use cdn link of tailwind css then it works but not with installed tailwind css
I've read somewhere that tailwind doesn't support dynamic classes it compile only given classes...
What to do
Please reply . . .
Just use cdn then if it works 🤷🙂
@@Hacking-NASSA-with-HTML but what if I've to build classes and at last when I will run npm build it will miss the undefined classes
Nice keep going
tq, very helpfull
Thank you :)
Thank you
Great video as always! Any plans to do a Shopify development tutorial?
I haven’t really, but I do have quite a bit of experience with Shopify.
Hey bro, can you make a spaceX clone using ReactJS/NextJS and Tailwindcss/Material UI. It will be super challenging and fun 🤟🏻✌🏻
Will do! They have an awesome site!
@@codecommerce yes 👍🏻✌🏻
Thank you!
You're welcome!
Not working collapse in bootstrap 5
Could you make a ecommerce shop from top to bottom with built in stripe api maybe? Nextjs and tailwindcss with the new 13v of nextjs with font optimization etc?
React > next js
@@JJ25Flo next js is a react framework my guy with alot more advantage over pure react. next js handles routing by default, increase SEO which helps to increase search index along and with many more stuff
@@speedster784 oh really, so you suggest someone who recently been building on react eventually transition to nextJS ?
They are very similar. No need for react-router for multi-page apps when using NextJS. :)
Very good bro
Hi guys, I'm having challenge here, I'm getting this error:
Uncaught
TypeError: Cannot set properties of null (setting 'onclick')
After adding this code piece:
let btn = document.querySelector('#btn');
let sidebar = document.querySelector('.sidebar');
btn.onclick = function () {
sidebar.classList.toggle('active');
};
What could be the problem.
make sure the script block is inserted after the body end tag but before the end html tag . This way all the html elements will be loaded before the script.
Can you provide you code? (a.k.a what you wrote for your code)
ah sorry, I'm not sure I saved this one..
@@codecommerce If you can, can you follow what you did and do it?
Plzz make ecommerce project in tailwind css with Redux toolkit plz bro becuz there is no ecommerce project in your channel so am waiting for your response
Just think about you and notification drop
user-img not vorking 😢
dont you have a download pls ?
Clint answered that in this comment section somewhere that he didn't save the code.
Id is not working anymore
Great to see html and css tutorials
You can’t use tailwind if you don’t know how to use css so thank you very much 👍🏽
Thank you Sharif. You’re 100% right. Tailwind would be difficult if you don’t first understand CSS.
You cant use react if you dont know javascript
People sometimes forget about the roots
salamat lods
Where's the download?
nice bro
Thank you my friend!
nice
source code?
Source code plz.
8:11
source code please
@codecommerce, the .sidebar.active ~ .main-content is not working for me :")
I hope you can explain more about the .sidebar.active.
from my understanding, .notation is used to access class but this time, you have .active. so it's different
this is now okay. i have a typo on the onClick method. :)
code source ?
👌👌👌👌💪💪💪👍👍
This is not responsive right? There are not any media Querries used
Surprised there isn’t a project video about e-commerce given that your name is code commerce lol
Haha funny - most ecommerce now days is styling within shopify, wordpress, or bigcommerce.. I guess I could do a theme with shopify or wordpress. :)
Create a rubike's cube app
nice
source code please