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.
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.
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!!
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.
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
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 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 . . .
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.
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
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.
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
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.
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).
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?
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
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!!
Video ini sangat membatu saya sebagai pemula rpl, sangat mudah dipahami sekali, sukse selalu bang CC💪💪
I am having an issue, when i'm adding container div and set the property as in video, i can see horizontal scrollbar
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?
26:00 excellent 👌👍
How did you get your window controls next to the tabs on your mac?
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.
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
Manually opening and closing it doesn't mean it's responsive... it needs to automatically pick the state based on screen size
Brother, one issue, when i resize the height of the window, it clips the bottom menu links. Any fix?
Can you please extend this for mobile view, where sidebar will open on top of main content
@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?
how did you get the divs to fall under each other when writing .sidebar on css?
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.
I’m having issues with the overlay contents for each sidemenu item
Where do I place the divs
Awesome work
How do I add a toogle button??
Thanks for the tutorial bro!
One question, how to make a dropdown on the sidebar?
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.
Do u plan doing that in react js it would be perfect. Also u can show method how to integrate these components irl projects.
Amazing sir 🎉🎉🎉 🙏🙏
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
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
Nice and clean Explanation, thanks for your efforts
Nice explanation sir
❤thanks for sharing
you didnt mention when it will goes on mobile how it will behave?
Thank you for this bro!
Not working collapse in bootstrap 5
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
This is amazing! Really helped!!
fire and excellent Approach
awesome video. saved my life
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?
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;
}
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.
Great work 👏
Amazing stuff as always!
Thank you Yahya!
Thank you for teaching me
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. :)
user-img not vorking 😢
Your explanations were very clear. Thank you! Can't wait to see more tutorials on your channel. ❤❤ Love from India..
Thank you so much!
Just think about you and notification drop
Nice keep going
Thank you so muchhhh saved my life :D
Glad it helped!
Çok teşekkür ediyorum sağ ol.
Thank you so much!!
dont you have a download pls ?
Clint answered that in this comment section somewhere that he didn't save the code.
Where's the download?
Id is not working anymore
Thank you very much mannnn
source code?
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.
youbare awesome.... ❤️🔥
please bring big reactjs project which covers everysingle concept of reactjs 🔥
Very good bro
Source code plz.
tq, very helpfull
Thank you :)
Good stuff. Its a sub.
Lets see what other goodies you have on the channel.
Thanks dude!
Thank you
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
8:11
Thank you!
You're welcome!
source code please
code source ?
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 👍🏻✌🏻
@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. :)
This is not responsive right? There are not any media Querries used
salamat lods
nice
nice bro
Thank you my friend!
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
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
👌👌👌👌💪💪💪👍👍
source code please
nice