It's now time to create the first significant component for a single page application.
We're going to create that enough bar component and we're going to place it either in the up dot view
component specifically the Nevada component is going to be a single fi component that we're going to
place inside the components folder and we are then going to Aditya the same way for example the router
view component is being added to create our component.
We're going to use bootstrap CSX the NAV Barak last year.
And even though it's true that we could install bootstrap in our project using NPM we've seen how we
could do that using for example view UI.
What is also true is the fact that we are using Bootstrap already in the off a layout template yet we
are just including a normal citizen linked to bootstrap SSL.
And considering that awfully outdoors HDMI out is not part of the single page application itself.
It's not strictly part of the application because it's the parent template for logging and registration
form.
We try to use that which are rendered by the server in fact to simplify our development process we can
create a new HDMI template base dot HDL and then we can use that file as a parent HDMI file to both
of the layout ne email and index dot HD demo so that we can place this link to the Sudan inside of the
base dot HD email file and have access as a consequence to all the classes provided by bootstrap from
everywhere in our application.
So yeah in the templates folder now going to create new file base not just the email and inside of this
file we can now move most of the code use there.
So of course I'm also going to move the link to google fonts.
So one
and Dan all of these up to the head like so but this has to be moved back to it awfully out template.
Now we can use template tags as always.
So yeah based on HDL.
First of all inside of head I'm going to define block style and block closet and also inside of body
block content and then block.
So now that base dot HCM L is finally genetic.
Let's copy block content and block like so 1 and 2 and not so of course look looks Tyler so pure
and.
You can of course if you want to move all of these CSF glasses to a separate file and that's a great
idea especially if you're adding a lot of style to your application.
And one more thing that we need to do in this file is to change the name of this blog to author or something
else.
But it's important not to have two blocks with the same name.
So let's move to a registration logging dotage CML.
So this is going to be a block or so.
And same thing for registration form a block off that's now closed these two files and let's open index
dot each to instead.
So Europe first of all
expense base dot based e-mail and well we also need to update Pyotr and any idea we can just start simply
block content 1 and 2 here and block we can also make everything.
And we can also delete these h1 tag that you had no longer going to need.
We can now restore it to development server just to be sure that all the changes to the HMO files are
recognized.
And if we now go back to Question Time and then accounts look out.
Yeah.
We still have you see have templates working as expected.
And one more thing that we can notice is that we are now using Bootstrap you see because all the font
has changed.
And if we check the source code of the page just out of curiosity we see that we now have all sorted
it to links to bootstrap and refunds.
That's now created enough by single file components.
So inside of the components folder you file Barbara dot view and here we are going to need template.
Now we're going to need script.
And we're going to need style.
So first of all inside of script we can define name as number component y for the aged AML code.
We can rely on the classes provided by bootstrap.
So I'm just going to copy the code for these navigation bar.
I'm going to paste it inside like so we have one route HCM element which is these never going to indent
the code like so.
And now that we have the component we need to imported inside our product view so that we can add it
up here in the HDMI code.
So we are in between.
Let's define script.
We've name it was output components is an object of components.
I'm just going to indent using four spaces.
So yeah we want to use the enough bottom component.
We've just created and of course we need to import it.
So yeah import enough bar component components
slash enough bottom
view.
And by the way to change that indentation level for V2 in the extension we can go to file preferences
settings and any workspace settings and just check for that.
Sighs Yeah.
Set for and now that the component is registered we can use it.
So yeah inside of the DB we've I.D. apple.
I'm just going to use nav bar component as a self closing tag.
Let's also change the indentation
so having enough bar component to appear before a router view that once again allows us to see the content
of the different components based on the page with the visiting will let us see that enough bar component
of from everywhere in that application.
And therefore if we now go back to Chrome in a single page application we see that we finally have the
navigation bar on top.
Awesome.
Let's not personalize it.
According to our needs.
So win back to NAV but that view first of all let's add a container.
So div class Container going to move these down here.
So if you take a look much better than before.
Let's also add a bit of border you are below on the bottom part of the navigation bar so I'm going to
define a new CSF class my bottom
here in the style tag you may not bother with but the bottom one pixel solid and we can make it Grey.
Let's have a look.
It looks perfectly fine and well actually we can also move a bit of the CSF code out from the awfully
out dot HDMI template or well more than movie.
We can just copy it and then we can pass it yet in the app door to view component.
Let's remove all of these.
We no longer need it.
And so considering that now this style is not scoped missile style as you can see is applied everywhere.
Let's also define a container class for the home component.
So home due view your leave plus container.
To let's see how it looks like and as you can see it already looks much better.
There are four elements that we want to add to our navigation bar.
First of all you are on the left the brand of an application question time and then three buttons are
on the right side.
So going back to NAV bar that view let's make these nav bar there where we want it.
We can't just delete the form.
We don't need it and we can change the unordered at least Glasser to managing left out all this way
we can also remove the idea we don't need and turn is linked so we are going to have home add new question
and then look out at the moment.
However we can add the link to about instead of other question we're going to modify it later on in
order to connect ohm and about we're going to use router links.
So let's just delete these anchor tag.
Yeah.
Instead I'm going to define a router Linker 1 and the closing one
like so.
So these can be home then we need to pass that through proper.
And similarly to the way we use the reverse function in Django we can use the names we've given to the
different parts such as for example home to get the proper link automatically.
So yeah you can do.
Name is ohm this way we're tailing router link and we want to create a link to the path which has a
home as a name.
Let us also add the classic classic equals matter button small button success and if we now take a look
at Chrome that is our home button let's add the other two.
So I'm just going to copy and paste to code like so this is going to be a link to about so yeah name
equals about.
We can change the class we can make it a button thread by using the danger class and the name of course
is meant to be different about.
We can't however use a router link for the third link because these as we said is going to be a link
to that logout.
You have up which as you probably remember is simply slash accounts fleshed out.
And so yeah we can anyway define the class so as Button Button small button outline secondary.
Let's have a look at Chrome.
And yeah yeah let's also add a bit of margin on both sides of the about button.
So yeah we can simply add an x 1 much better let's not change the number brand to question time and
let let's also style it so that over in it with the mouse we change its color.
So yeah I'm just going to delete all of these because in fact we're going to need to use a router link
one more time so this way.
So this is going to be question time.
The prob is perfectly fine.
We can go back to the one page while clicking on the brand but we need to change the class.
So this is going to be simply no brand.
Let us also add a bit of style below so no brand.
We can make it bold so the font weight bold font size.
Hundred and thirty percent.
And as we said we also wanted to be red.
We love it.
So we had a over color and we can use it bootstrap like red.
With important.
Let's now go back to Chrome it it easier.
And if we are with the mouse it changed to red.
Perfect.
Let's also test the deleting system so first of all log out and get locked out successfully.
So let's log Burkina let's test about it works.
This isn't about page home.
It works as well.
Perfect.
And then of course also the number brand.
So the links themself work as expected.
However the buttons don't you see that when clicking on about 2 need in fact stays pressed the same
thing happens with home.
This happens of course because this is a single page application.
Therefore there is not a flash and so we need to change the style of the buttons to make the NBA the
way we want.
And considering that we're going to use several battles throughout the whole application not just in
the enough power component we better define the new style here in the app dota view component.
So much focus in the property that we want to change is called The Box shadow and the value we want
is non important.
Let's see how it works.
So going back here about how perfect.
And by the way that is no need to change the styling of this about the component because of course we
are not going to use it.
One last thing that I can said before finishing is to change back that tab size to 2.
You can of course keep you dead for space if you prefer.
However in my case I think it's probably the best decision.
Also considering that I'm using 18 as font size in order for you to read everything properly from the
video so I'm going back to file Preferences Settings workspace size here too to and Danny Haddock is
simply to the right click the format document and same thing for the other components of the application.
So home and also of course opposite view.