Version: 5.0.3

CommonSidebar

Similar to Header, the Triton Common Sidebar is one of the page layout options provided in the common package in Triton. A sidebar displays content on the left side of a page. Sidebars are often used in conjunction with headers, to provide users access to navigation and functionality throughout the website.

Basic Usage

<triton-common-sidebar>
  <triton-menu>          
    <triton-menu-item icon="alarm">Notification</triton-menu-item>
    <triton-menu-item icon="cog">Settings</triton-menu-item>
    <triton-menu-item icon="application">Applications</triton-menu-item>
  </triton-menu>
</triton-common-sidebar>

<TritonCommonSidebar>
  <TritonMenu>          
    <TritonMenuItem icon="alarm">Notification</TritonMenuItem>
    <TritonMenuItem icon="cog">Settings</TritonMenuItem>
    <TritonMenuItem icon="application">Applications</TritonMenuItem>
  </TritonMenu>
</TritonCommonSidebar>

<html> 
  <head> 
    <script type="module"> 
      import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-common/loader/index.es2017.js'; 
      defineCustomElements(); 
    </script> 
  </head> 
  <body> 
    <triton-common-sidebar>
      <triton-menu>          
        <triton-menu-item icon="alarm">Notification</triton-menu-item>
        <triton-menu-item icon="cog">Settings</triton-menu-item>
        <triton-menu-item icon="application">Applications</triton-menu-item>
      </triton-menu>
    </triton-common-sidebar>
  </body> 
</html>

Notification

Settings

Applications

Behavior

Minimized

By setting the minimized property to true, the sidebar will show in a minimized version.

Notification

Settings

Applications

<triton-common-sidebar minimized='true'>
  <triton-menu>          
    <triton-menu-item icon="alarm">Notification</triton-menu-item>
    <triton-menu-item icon="cog">Settings</triton-menu-item>
    <triton-menu-item icon="application">Applications</triton-menu-item>
  </triton-menu>
</triton-common-sidebar>

The sidebar wrapps the Triton Menu, so it can use sub-menus as well.

Menu Item 1

Menu Item 2

Sub Menu Item 1

Sub Menu Item 2

Menu Item 3

Sub Menu Item 1

Sub-Sub Menu Item 1

Sub-Sub Menu Item 2

Sub Menu Item 2

<triton-common-sidebar>
  <triton-menu>
  <triton-menu-item>Menu Item 1</triton-menu-item>
  <triton-menu-item>Menu Item 2</triton-menu-item>
  <triton-sub-menu title="Sub menu one">
    <triton-menu-item>Sub Menu Item 1</triton-menu-item>
    <triton-menu-item>Sub Menu Item 2</triton-menu-item>
  </triton-sub-menu>
  <triton-menu-item>Menu Item 3</triton-menu-item>
  <triton-sub-menu title="Sub menu two">
    <triton-menu-item>Sub Menu Item 1</triton-menu-item>
      <triton-sub-menu title="Sub menu two-one">
      <triton-menu-item>Sub-Sub Menu Item 1</triton-menu-item>
      <triton-menu-item>Sub-Sub Menu Item 2</triton-menu-item>
    </triton-sub-menu>
    <triton-menu-item>Sub Menu Item 2</triton-menu-item>
  </triton-sub-menu>
</triton-menu>
</triton-common-sidebar>

Playground

API

Properties

Property	Description	Type	Default
`minimized`	not implementet yet Show the sidebar in minimized version only the logo will show and the header content will be available through a dropdown	`boolean`	`true`

Events

Name	Type	Description	Extra
afterMaximized	`CustomEvent<void>`	Emitted after sidebar has maximized	-
afterMinimized	`CustomEvent<void>`	Emitted after sidebar has minimized	-

CommonSidebar

Basic Usage​

Behavior​

Minimized​

Sub-Menu​

Playground​

API​

Properties​

Events​