@datenlotse/sidebar

Datenlotse Navigation

• Datenlotse Navigation
  • About
  • Installation
  • Basic Usage
    • Configuring Buttons
    • Customizing Sidebar Title
    • Start opened
  • Advanced Usage
    • Opening and closing
    • Getting the current Sidebar open / close status

About

This module includes the Sidebar Navigation used by Datenlotse Angular Applications.

Installation

Simply import the SidebarModule into your AppModule. For the Fonts to work, you need to either have Roboto and Montserrat already imported. If you dont have them already imported, simply import the import.css in your global styles like so:

@import '~@datenlotse/sidebar/assets/import.css';

Basic Usage

To include a sidebar into your application, include this in your apps template:

#app.component.html

<dl-sidebar-container>
  
  <dl-sidebar>
    <!-- Put your buttons in here -->
  </dl-sidebar>

  <dl-sidebar-content>
    <!-- Put your content here -->
  </dl-sidebar-content>

</dl-sidebar-container>

Configuring Buttons

To configure your sidebar with buttons there are 3 components that you need to include:
dl-sidebar-button The main button component

dl-sidebar-button-image The small icon that is visible

dl-sidebar-button-text The text, that is show when the sidebar is open

For example:

<dl-sidebar-container>
  
  <dl-sidebar>

    <!-- Test button -->
    <dl-sidebar-button>
      <dl-sidebar-button-image src="assets/icons/business.svg"></dl-sidebar-button-image>
      <dl-sidebar-button-text>Dashboard</dl-sidebar-button-text>
    </dl-sidebar-button>

  </dl-sidebar>

  <dl-sidebar-content>
    <!-- Put your content here -->
  </dl-sidebar-content>

</dl-sidebar-container>

If you want the button to be bright (white font and icon) you can add the dlBrightButton directive to the dl-sidebar-button element.

Customizing Sidebar Title

In order to customize the sidebars title you can use the title attribute on the dl-sidebar element:
For example:

<dl-sidebar title="Custom Title">...</dl-sidebar>

Start opened

By default the sidebar will be closed. If you want it to be open by default, simply set the defaultOpen property on the dl-side-bar element to true
For example:

<dl-sidebar [defaultOpen]="true">...</dl-sidebar>

Advanced Usage

Opening and closing

You can programmatically open and close the Sidebar by injecting the sidebarService into your component and calling the openSidebar() and closeSidebar() methods respectivly.

Getting the current Sidebar open / close status

You can get the open / close status of the Sidebar from the sidebarService as well. Simply inject the service into your compenent and either subscribe to the sidebarOpen Behaviour Subject or get the current value using sidebarOpen.getValue() method.