Skip to content

CodeCoupler UI Stage "Sidebar"

Sidebar is an stage object which will build a sidebar on the left side of the current stage and provide a new stage on the right side. The stage will display icons which start an application, execute a user defined function or opens a list in a subnavigation flyout, in which the items can also start an application or execute a user defined function.

The sidebar is divided into four parts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
+---+
|   | <- Logo
|---|
|   |
|   | <- Main Area
|   |
|---|
|   |
|   | <- System Area
|   |
+---+
|   | <- Switcher
+---+
  • You can optionally display a logo image at the top of the sidebar.
  • You can distribute your icons into a "main" and a "system" area.
  • The switcher will display a wider sidebar with names to the right of the icon.

Options

  • logo: Path to image of the logo to insert in the Logo Area. If not set the logo area will be removed.

  • items: object[]

Array of icons to display in the sidebar.

  • items[].roles: string[]

Allowed rolenames for this icon. If the roles of the current user do not match, the icon will not displayed.

  • items[].scopes: string[]

Allowed scopenames for this icon. If the scopes of the current user do not match, the icon will not displayed.

  • items[].area: string

In which area should this icon displayed. Can be main or system.

  • items[].type: string

Type of this entry. Can be app, function or group.

  • items[].ui: CodeCoupler Application Object

In case of type is app this will overwrite the ui property of the application to start. In case of type is group or function this is mandatory and the minimum properties should be name and iconHtml. You could omit iconHtml if the entry is inside a subgroup.

Application specific options (only relevant if type is app):

  • items[].app: CodeCoupler Application Object

The application class to start.

  • items[].options: any

The options with which will start the application.

  • items[].panel: object

The panel options with which will start the application.

  • items[].id: boolean

If true, the app will start only once. If the icon will be clicked multiple times, the running application will just be fronted.

Group specific options (only relevant if type is group):

  • items[].items: object[]

This array is the same as the items array, with a difference: Entries of type group are not allowed here.

Function specific options (only relevant if type is function):

  • items[].click: function

Function to execute if the user clicks on the icon.

Styling

Use this template to change the colors of the sidebar:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/* Just an example */
:root {
  --color-primary-0: #566349;
  --color-primary-1: #454a41;
  --color-primary-2: #4d5646;
}

.cc-sidebar {
  /* The logo will just inserted into an img tag with almost no
  styling. You should limit the size if you are using big image files.
  Set "!important" to the height attribute, because it's already 
  defined in the base style of the sidebar.  */
  & .logo img {
    width: 60px;
    height: 60px !important;
    margin: 5px 10px 30px 10px;
  }

  /* To set the background-color of the sidebar */
  & .cc-sidebar-nav {
    background-color: var(--color-primary-2);
  }

  & .cc-sidebar-flyout {
    /* Colorize the header of the flyouts */
    & .header {
      background-color: var(--color-primary-0);
      color: white;
      & .title {
        /* or here more specific */
      }
      & .controls {
        /* or here more specific */
      }
    }

    /* Colorize the body of the flyouts */
    & .body {
      background-color: var(--color-primary-1);
      & a {
        color: white;
      }
    }
  }
}

/* Tooltips will be created outside the sidebar container.
To set the color of the tooltips, you can use the following code: */

.cc-sidebar-tooltip {
  & .tooltip-inner {
    background-color: var(--color-primary-2);
  }
  & .arrow::before {
    border-right-color: var(--color-primary-2);
  }
}

Details

Sidebar will insert a new div into the current stage with two underlying container:

1
2
3
4
5
6
7
8
9
+-----------------------------------------------------------+
| div.cc-sidebar                                            |
| +-----------------+-------------------------------------+ |
| |                 |                                     | |
| | nav             |          div                        | |
| | .cc-sidebar-nav |          .cc-sidebar-stage          | |
| |                 |                                     | |
| +-----------------+-------------------------------------+ |
+-----------------------------------------------------------+

Two of .cc-sidebar-nav will be inserted into the container. One of them is the sidebar which will be displayed at beginning and shows only icons. The second one displays the names to the right of the icons. The second one is absolute positioned and will be displayed if the user clicks the switcher. The container of the two sidebars have different additional classes:

  • <nav class="cc-sidebar-nav small">
  • <nav class="cc-sidebar-nav full">

The basic structure of the sidebar container is:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
+---+
|   | <- Logo (div.logo)
|   |    Image will centered and grow to 100% width if small
|---|
|   |
|   | <- Main Area (ul.nav.flex-column.main)
|   |    Grow as much as possible
|   |
|---|
|   |
|   | <- System Area (ul.nav.flex-column.system)
|   |    Shrink as much as possible
|   |
+---+
|   | <- Switcher (div.switcher)
+---+

Each icon is build inside the system and main area with the following template:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
+-----------------------------------------------------------+
| li.nav-item                                               |
| +-------------------------------------------------------+ |
| | div.nav-link                                          | |
| | padding: 12px                                         | |
| |                                                       | |
| | Subelements x/y-centered in "small" sidebar           | |
| | Subelements y-centered in "full" sidebar              | |
| |                                                       | |
| | +--------------------------+------------------------+ | |
| | | div.nav-link-icon        | div.nav-link-name      | | |
| | | font-size: 24px          | font-size: 14px        | | |
| | |                          | white-space: nowrap    | | |
| | | Subelements x/y-centered | padding: 0 10px        | | |
| | |                          |                        | | |
| | |                          | Subelements y-centered | | |
| | |                          |                        | | |
| | |                          | Will only displayed    | | |
| | |                          | in "full" sidebar      | | |
| | +--------------------------+------------------------+ | |
| +-------------------------------------------------------+ |
+-----------------------------------------------------------+

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<li class="nav-item">
  <div
    class="nav-link"
    data-toggle="tooltip"
    data-placement="right"
    title="<!-- name of the application -->"
  >
    <div class="nav-link-icon">
      <!-- iconHtml of the application -->
    </div>
    <div class="nav-link-name">
      <span><!-- name of the application --></span>
    </div>
  </div>
</li>

Each icon will display a tooltip. The tooltips will be created outside of the sidebar container. The tooltips use the following template:

1
2
3
4
<div class="cc-sidebar-tooltip tooltip" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner"></div>
</div>

Furthermore for each group an flyout container will be inserted into the stage container:

  • <nav class="cc-sidebar-flyout">

They are absolute positioned and have the following structure:

1
2
3
4
5
6
7
8
9
+---+
|   | <- Header (div.header)
|   |    Divided in two underlying container (div.title and div.controls)
|---|
|   |
|   | <- Main Area (ul.nav.body)
|   |    Grow as much as possible
|   |
+---+

Each list item inside the body area is build with the following template:

1
2
3
<li class="nav-item">
  <a class="nav-link nav-link-name"><!-- name of the application --></a>
</li>