Django: Getting Started Transcripts
Chapter: Users and Account Management
Lecture: Creating a nav bar
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
The next little bit is messy unless you're familiar with bootstrap. Quite frankly, even though I know me some bootstrap,
0:08
I still find this a bit hard to read. Bootstrap Nav bars are responsive what they show, depends on the width of the screen.
0:16
This is a good thing but requires a bunch of extra stuff. I want to have some info on the right side of the nav along with a
0:23
drop down menu with some links in it. I also want all this to behave nicely on smaller screens. This requires an extra step.
0:45
What I've just added here is a hamburger style menu button, that bootstrap will use if the screen is too small for all the other stuff
0:52
I'm sticking in the nav. Bootstrap is smart enough to know when to show this and when to hide it. This is the beginning of the section that will be
1:05
on the right hand side of the Nav bar. It is a collapsible section and bootstrap knows to show either this directly or show it
1:13
after the previously mentioned hamburger menu button has been clicked. The ul tag on line 31 is what's inside of the collapsible section and it's going
1:23
to list all the stuff I want to have in my nav.
1:43
The if condition on line 32 checks if the user is signed in. If they are you get some more stuff.
1:51
Inside of that if condition is a span that says hello to the user and adds an indicator as to whether or not their staff.
2:00
The next part is a drop down menu. Drop down menus and Bootstrap our a link plus an inner DiV to show when the menu is dropped.
2:09
This is just that link that will contain all the user's actions. The div from line 41 to line 51 is the dropdown div.
2:39
Inside of it I've put a series of links. The first one on line 42 is the one for the logged in user's profile page
2:48
The next one is only if their staff and is a link to the admin area. And then finally, links for changing the user's password and logging out.
3:02
Remember, at the top of all this mess there was an if tag to check if the visitor is authenticated. If they're not,
3:09
then instead you're going to be inside the else clause I've just defined in line 53
3:16
If they're not authenticated, there's no drop down and there's no hello to the user. There's just a link to the login page.
3:25
That's a lot and some pretty messy HTML. I can't wait to get back to Python, but first, let me demo all of this.