Worklog Part 2: Creating navigation with bootstrap

Creating navigation with bootstrap

We were start from already prepared bootstrap theme sample and we will try to take as much as possible out of it.

Navigation

Navigation bar will be at the top of each application page and should be always visible. All shared elements which are on all pages,  are going to the base layout, this is base.html.twig in our application.

If you need some specific information about bootstrap you can probably found it on this site. W3School.com site is one of my primary sources for web and SQL related questions.

After some experimentation I create something like that:

2015-12-06 12_18_10-Dashboard - Bisaga Worklog

Main navigation bar at the top is always visible even when we scroll down beyond visible space (navbar-fixed-top). This require little additional CSS settings that our pages on the top has some default margin.

CSS

In our worklog.css we define default top margin as:

Because we define “body” element as selector, this will be valid for every web page in our web site.

Navigation tag with bootstrap  settings

One part of template looks like:

We create navigation bar with brand icon on the left and some icons with two direct links (calendar, alerts) and two drop-down menus for some additional actions.

You can download the whole file from here.

Controllers

Default page on the web site will be used as dashboard, so we create dashboard.html.twig template file and controller class in  DashboardController.php . We also connect default ‘/’ route to this controller (Application.php).

Links

For links we use direct path navigation with little help of Silex Application constants, so links are assembled like this:

In some point I will probably study assetic component from Symfony but for now I will stick to this simplest semi-direct references.

Icons

Icons are actually characters from the font Font-Awesome. Images on the navigation bar are slightly larger (fa-lg) then those in drop-down menus.

You can learn more about font awesome usage here.

This sample application is published on github.