Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

Join for $8.00/mo Sign in
robot mascot smiling
Previous
Sign Up to Track Progress
Next

Completing Our AppLayout & Navigation Bar

In this lesson, we'll finish setting up our application's layout shell and navigation bar.

Tom Gobich
Author
Tom Gobich
Published
Oct 02
Duration
16m 31s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Visit Website

Chapters

00:00 - What's Our End Goal?
01:13 - Setting Up Our Header & Main Elements
03:12 - Creating Our Header's Navigation
07:05 - Creating the Mobile Navigation Sheet
10:45 - Applying Our Navigation Component to the AppLayout
11:40 - Adding Our User Menu Dropdown
15:40 - Inspecting Our Work

Final Layout Components

This lesson contains a lot of HTML markup. If you're not interested in how Shadcn-Vue's Sheet or DropDown components work, you can skip this lesson, install the needed Shadcn-Vue components, and copy-paste the below if you're following along.

  1. Install The Shadcn-Vue Components

Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

Join for $8.00/mo Sign in

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.

robot comment bubble

Be the first to Comment!