Create a sidebar layout using Angular Flex-Layout

I remember well the time before flex-layout, when creating a sidebar layout was kind of defeating a monster.

But luckily today we have flex-layout at disposual, which made this kind of horror a thing of the past.

Let’s get startet:

1. Install Angular Flex-Layout

Follow the installation instructions on the Angular Flex-Layout GitHub page

2. Add this configuration to your global stylesheet

Is is also recommendable to include normalize.css in your project, to fix most rendering differences between browsers.

File: src/app/ styles.css

css

@import "~normalize.css";

html, body {
  height: 100%;
}

div {
  box-sizing: border-box;
}

3. Create the sidebar layout using the Angular flex directives

File: Add this to your page template, e.g. src/app/pages/dashboard/dashboard.component.html

html

<div class="container" fxLayout="row" fxLayoutAlign="start start">


  <div class="nav-sidebar" fxFlex="230px">
    Menu
  </div>


  <div class="main-content" fxFlex>
    Content
  </div>


</div>

File: Add this to your template styles, e.g. src/app/pages/dashboard/dashboard.component.scss

css

.container {
    height: 100%;
}

.nav-sidebar {
  height: 100%;
  background: #2A3F54;
  color: white;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.main-content {
    height: 100%;
    background: #eeeeee;
}

Layout Preview:

Sidebar with Angular Flex-Layout

Leave a Reply

Your email address will not be published. Required fields are marked *