From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Responsive sheet menu

Responsive sheet menu - Next.js Tutorial

From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Start my 1-month free trial Buy for my team

Responsive sheet menu

“

Alright guys, now we're going to create a what's called a sheet menu and if you go to the ShadCN website and we click on sheet for the components and click this open button, you'll see that we get this this drawer or sheet, whatever you want to call it, they call it a sheet. In the final project, this is what it will look like. So if I make this smaller and we get these dots, click it And it's going to open it up, and it'll show the cart, the sign-in, and the mode toggle. All right, so first thing we need to do is add the sheet component. So we're going to come down to the terminal, npx shad-cn-latest. And we want to do add sheet. And we're going to choose Use Legacy Peer, if you get this. All right, so what I'd like to do is put the menu, so this right here, in its own component. Because right now, I believe, if we just look in Shared Header Index, we just have it in here. So why don't we create a new file in the header folder in the components. And let's call this menu.tsx. And…

Contents