Create Side Navbar in Next.js using shadcn Sheet 🚀 Real Use Cases Explained

Hello, what's up guys? Today in this video we will see how to create a side and a side napbar in our next application. Yes, guys, this is a very important video because you tell me the moment I click on this open button. And boom guys, now you can see from the right hand side I see a nap bar type thing. Basically a side nap bar is visible. And whatever kind of dialogue you see from the right side in a vertical orientation, then this is what we call a seat in the world of set scene. Correct? It has many use cases. Let me show you a simple use case. When you go to my website codefinder here, you can see that it does not matter whether its direction is right or left but whatever, if you see it this way, then here you can call it a side nap bar and this is what we call the seat. Similarly, if you come to Amazon's website, guys you can see here, look on the right side, I am able to increase or decrease its quantity or I am basically able to play with them. So this which you can see on the right side, you can also call it a sheet. So guys it has a lot of use cases. But how difficult could it be to implement this? But now with the help of set of new features we can easily implement it in our next application. So guys, before starting the video, I would like to tell you guys that if you have not already checked out the code of my Next js application then please check it out. I just uploaded a video today. Where you can see that if you want to learn CSS in two weeks from basic to advanced, that too live from me every day at 9:30 pm, I have kept the price only for ₹499. So guys, today is its last date. Classes are going to start tonight at 9:30. So you must check this out. It is very awesome, you will have a lot of fun here. Ok? I have given the link in the description and comment section below. Allright. So how can we use this ? Let me take you here. As you can see, by default we have seen so much. Guys, we saw our dialogue. We saw our draw. We have seen a lot. Ok? So let us see this sheet today and see how we can do it. Ok? And yes, carazol is also done. I will go here. Here I will make a demo. Let's sheet a demo. Ok? Allright. Ok. I'm going here. Let's move on to components. This is how I paste x here. Now here I go to React Arrow Function Component with Export. There is no need for this. Here I will go to this place. So here, if we go a little down, you can see that you have to import this. Basically we have to do this. This is the rule, if you use sets like yours, then in this way, whatever component of sets you want to use, in order to use it, it is itself using so many things, so we have to import it in this way. And by the way, I had to install this sheet also. Look at this, I did not install it, sorry, we have to add it. Ok? Ok? You have to add whatever component you need on the set side. So, I will copy this. I will go over here. Everything is fine. Allright. Ok. In this manner, I am going here and pasting it. Ok? So you can see that we are adding the sheet to our next application. It's a good thing. That's ok. Now my work is done. I will go here. This particular code which you are seeing. Now I have to copy this. And right below this I walk. Let me remove this deep. Let's go with this part directly sheet and or this is it. So our work is done. Where we have what we have the seat seat trigger its content header title and then description. Brother, what should I tell you? It was the same in case of dialogues too. There was dialogue instead of a blank sheet. It was the same in Drer's case also. Same is the case with end sheets. That's why all three of them look alike. But only the name is different. And their features and use cases are different. Ok? So I'll go here. Now, I will import whatever I have. Ok? I have imported this. Allright. So if we look here, we have this open and then I will also write its name here. Let's do it this way. Ok? So if I go here to this place, you can see that I can see this set open. If I click on this and boom guys. Look how cute and awesome it looks, I like a complete nap time. You could call it a nap bar. If I go on 100%, then look at this, this is it, now guys, tell me how much time it takes you to create it, but see how smooth the animation is coming from left to right, don't you mean it is fun to watch it, so this was guys, your open sheet, there are a lot of things inside it that you can do, for example, here you can see, it is telling that you can use the side property to set content, I mean sorry seat content, you can use this side property to indicate the edge of the screen, like where you want your component to appear, like you want it on the top, on the right, on the bottom, on the left, so it means here not only for vertical nap bar, you can use it for multiple things, this is what I mean to say because not only from right and left but also from top and bottom also, we can use it. So you can adjust this size of the sheet using the CSS classes. Ok? I am telling you that if you need to adjust the size then you can do this. Basically it is a simple part of Talon. You kept the width at 400 pixels. And if you are watching on small devices then your width will be this much. It is something like this. Ok? Whatever it is, we have to try it. Let's try side property. Ok? The set content is mentioned here. So do we have a site property or we have it already right. Let me turn left. Ok? Let's see what happens once. It does n't require me to refresh it once though. Butt boom guys. Look at this, it is so awesome. And yes one more thing, if I click outside then it is getting closed for you. Even if I click here it gets closed. Ok? Now, I want to give this part a little button fill. So I have told you this every time. Like we have a button component. Ok? You can see that we have a button component which we have already added inside the UI. This is a part of the set chain. This is how I put it inside it. Am. And I told you if you do this then if you go to the UI you will see a problem. And that problem is nothing but you will see the double double button and then that will be visible here. Ok? Ok? If you look here, there is a button inside a button, which is wrong. We just need one button. So we don't do anything for that, guys. We have a simple logic. And that is what you need to go with each child property over here. This is it. Now it is equal to me. Ok? My work is done. Now there are a lot of things you can do here. We looked left. Let's do something. Let's top it and see how it looks. Look at this. Oh my God. How lovely it looks. Look, you can see it from the top, right? And here guys you can add a lot of things. It's just your content, right? This is your content. You can add a complete nap bar here inside the description itself. Like let's go with UL L I L I. Ok? Let me do something like this and refresh. Look, you can see this home home home home. If you leave this one, right? So look at this, home home home, means you can see that now here you can use the icons, you can do a lot of things and so guys, if we look here, the size, as I have already told you, you can do it very easily, it's just your tail wind CSS only, the rest there is not much, but yes, if you look at this bigger one, you will see a form like this where you can fill the form, you can see the save changes, you can see the close button, if you want, you can very easily go into the code and check out what they have done, they just set their description. Basically, going outside the header, they placed a div outside the set header, inside which the entire code is placed. And then at the end they have put a set footer. We already have our previous video, if you remember then whatever was our carriage ride or guys, your director or you can say your dialogue, we have already seen that. Seat footer button sheet close is not h child what is this how can you do it with variant. And normally, if you copy this piece of code, which is a normal form, like, which is a normal form, then it will appear here also, finally, it is copied, it is a good thing, if I go here, look carefully, ok seat demo label alright guys, now actually what has happened is that it is telling us that this label is not a label defined, now the label is not defined, so what do we have to do by going here and setting the label in this manner. And yes, remember one thing, this thing, you have to do it only once. If you are working on any page in your project, then you just have to add install i mean once there. And then directly, if this UI is inside your component folder , the UI that is inside the component folder, look here, the button is already a card. Carriage dialog: Look, the input was already there. Now the label has also arrived. Now I have no tension. Ok? If a second label has come here then I will have to import it. And that's from my UI label. Maybe something may come for input also. Ok? I do that as well. And okay. So three two one and boom guys. C look at this, can you see the name? I too have come. So look, it has come. Whatever you want to type in my name, you can do that here. Isn't it? And whatever username you want to type here, you can do it here. So guys, you can also get this done through a side nap bar. There are many things which you feel that if you want to show some things coming from the left or right in this way, then you can do this work very easily here. And this is so awesome. Isn't it? We have seen so many things. Oh my God we have carazol here. So guys, how do you like this Set CN V Nex course, do let me know by commenting. I would like to remind you again guys if you want to learn CSS in just two weeks from basic to advanced with complete animation. So guys this is the perfect opportunity because I have kept the price at just ₹499. Tell me, will anyone keep this much for two weeks? No one keeps it, but I have kept it for you guys, so you can definitely check it out. Please enroll. Only one day is left today. According to me, there would hardly be 10 hours left as it is going to start at 9:30 pm tonight. Ok ? So guys, if you like the video then please like and share it with your friends. If you have any doubt or any suggestion, please tell us by commenting. I am here to help you. But before that if guys have not yet subscribed to the channel then please do so. I will meet you in the next video. Till then guys thank you so much. Take care.