Creating Sidebar Tabs and Pages

While there aren’t any current plans to add more sidebar tabs to the launcher, there might be in the future (keeping in mind that the sidebar space is limited). The last sidebar tab to be added was the Simitone installer.

To add a whole new sidebar tab and page to the launcher, it’s done entirely in the fsolauncher.pug file:

1. Add a tab to the sidebar

The sidebar element is ul#sidebar. It’s an unordered list HTML element. You can add a list element (<li>) in it to add a new tab.

This is the ul#sidebar element as of the writing of this page:

ul#sidebar
  li#logo
      div
  div#simitone-gradient
  button.launch #{PLAY}
  #simtime-container(title=INGAME_TIME)
      i.material-icons access_time
      #simtime 00:00 AM
  li.active(page-trigger='home')
      i.material-icons.left home
      |  #{HOME}
  li(page-trigger='installer')
      i.material-icons.left widgets
      |  #{INSTALLER}
  li(page-trigger='downloads')
      i.material-icons.left get_app
      |  #{DOWNLOADS}
  li(page-trigger='settings')
      i.material-icons.left settings
      |  #{SETTINGS}
  li(page-trigger='notifications')
      i.material-icons.left notifications
      |  #{NOTIFICATIONS}

  div.bottom
      li(page-trigger='simitone')
          svg.simitone-icon(version='1.0', xmlns='http://www.w3.org/2000/svg', width='109.000000pt', height='149.000000pt', viewBox='0 0 109.000000 149.000000', preserveAspectRatio='xMidYMid meet')
              metadata
                  | Created by potrace 1.16, written by Peter Selinger 2001-2019
              g(transform='translate(0.000000,149.000000) scale(0.100000,-0.100000)', fill='#000000', stroke='none')
                  path(d='M497 1452 c-55 -84 -82 -219 -73 -375 6 -102 12 -143 26 -162 5 -5\
                  18 -48 31 -93 23 -85 22 -104 -5 -202 -3 -8 -5 -18 -5 -21 -1 -4 -36 -8 -79\
                  -10 -124 -6 -211 -57 -314 -186 -21 -27 -43 -65 -44 -78 0 -5 -9 -36 -18 -68\
                  -11 -36 -17 -80 -14 -115 2 -48 8 -61 33 -84 43 -39 105 -53 235 -53 109 0\
                  119 2 182 32 92 44 160 110 204 199 32 65 37 82 41 176 8 151 -15 269 -99 523\
                  -67 199 -71 215 -72 305 -1 81 2 101 22 138 13 24 25 42 27 40 1 -1 5 -21 8\
                  -43 9 -63 29 -149 37 -160 4 -5 13 -38 20 -73 l13 -62 81 -40 c96 -46 337\
                  -150 348 -150 4 0 8 9 8 19 0 30 -68 320 -88 376 l-18 49 -179 78 c-145 62\
                  -190 77 -231 78 -49 0 -53 -2 -77 -38z')
          |  SIMITONE
      li(page-trigger='about')
          i.material-icons.left help_outline
          |  #{ABOUT}

Taking the installer tab as an example:

li(page-trigger='installer')
  i.material-icons.left widgets
  |  #{INSTALLER}

• Add a unique page-trigger attribute value. This will link to the actual page inside the launcher, so that when you press this tab the launcher navigates to it.
• Add an icon for the tab. The launcher uses material icons, but you can also include custom SVG icons, as seen in the Simitone tab element.
• Add the text for tab. #{} means it’s a locale value, taken from uitext.json. Every string in the launcher .pug file should be obtained from locale values.

2. Add a page with content

Having a sidebar tab that links to nowhere won’t do anything, you actually need a page linked to it.

The way to create a page with content is to add an element with the .page class to the #content container element with the display: none inline style.

As an example, here’s the Home tab page:

#home-page.page(style='display:none')
  h1.jumbotron
      span #{HOME}
      small #{HOME_DESCR}
  .page-content(style='position:relative')
      #rss-loading(style='font-size:20px;margin-top:20px;display:block;text-align:center')
          i.fa.fa-hourglass-half.fa-spin(style='margin-bottom:15px')
          br
          |  #{RETICULATING}
      #rss
          .alt-content
              i.material-icons(style='font-size:28px') wifi_off
              br
              | #{INTERNET_REQ}
          #rss-root
      #did-you-know(style='display:none')

• Give the element an id, starting with the value you set in the page-trigger attribute for the sidebar tab element. This is how a tab is linked to a page. Use the following format: #<page-trigger-value>-page. The home page’s is #home-page, the installer’s is #installer-page, etc...
• Add an h1.jumbotron, which contains the title and small text (description). This is the element that appears right on top of the content.
• Add the page-content element: .page-content(style='position:relative'). The page content will go inside this element.
  • At this point, you’re free to add anything you want inside the .page-content element. You can divide it into columns, for example, like the home page has, to divide the content.