daggerok / simple-toolbar-angular-example

Learn how to easy and quick design and implement simple toolbar with Angular

AngularToolbar

Learn how to easy and quick design and implement simple toolbar with Angular

site routes and components pages

let's create 3 components for needed pages: Home, Services and Contacts:

ng g c components/home
ng g c components/services
ng g c components/contacts

and configure routes in app-routing.module.ts file:

// skipped before...
import { HomeComponent } from './components/home/home.component';
import { ServicesComponent } from './components/services/services.component';
import { ContactsComponent } from './components/contacts/contacts.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'services', component: ServicesComponent },
  { path: 'contacts', component: ContactsComponent },
];
// skipped after...

html structure

main app.component.html structure should looks like so:

<header id="header">
  <div id="banner">MyAweApp</div>

  <div class="spacer"></div>

  <ul id="menu">
    <li><a href="#" routerLink="/">Home</a></li>
    <li><a href="#" routerLink="/services">Services</a></li>
    <li><a href="#" routerLink="/contacts">Contacts</a></li>
  </ul>
</header>

<router-outlet></router-outlet>

styles

global styles in styles.scss file, just doing basic reset css and setting up font we need:

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif, Arial;
}

finally, our app.component.scss scoped styles should be as follows:

$primaryBgColor: rgb(173, 16, 215);
$activeLinkBgColor: darken($primaryBgColor, 5%);
$primaryColor: #fff5d7;

header#header {
  display: flex;
  background-color: $primaryBgColor;
  color: $primaryColor;

  #banner {
    padding: 1em;
  }

  .spacer {
    flex: 1;
  }

  ul#menu {
    display: flex;

    li {
      padding: 1em;
      list-style: none;

      a {
        text-decoration: none;
        color: $primaryColor;
      }

      &:hover {
        background-color: $activeLinkBgColor;
      }
    }
  }
}

@media (width: 414px) {
  ul#menu {
    padding-right: 1em;
  }
}

results

Mobile:

Desktop: