Adding additional items to the sidebar

theme: SoftUI({
  sidebar: {
    items: [
      {
        id: String,
        name: String,
        link: String,
        icon: String,
      },
    ],
  },
});

Using gestures on mobile

theme: SoftUI({
  sidebar: {
    gestures: {
      disabled: Boolean,
      gestureTimer: Number,
      gestureSensitivity: Number,
    },
  },
});

Example Usage

theme: SoftUI({
  sidebar: {
    items: [
      {
        id: 'pp',
        name: 'Privacy Policy',
        link: '/privacy-policy',
        icon: `<svg class="text-dark" width="16px" height="16px" viewBox="0 0 40 44" version="1.1"
                  xmlns="http://www.w3.org/2000/svg">
                <title>document</title>
                <g id="Basic-Elements" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Rounded-Icons" transform="translate(-1870.000000, -591.000000)"
                        fill="#FFFFFF"
                        fill-rule="nonzero">
                        <g id="Icons-with-opacity" transform="translate(1716.000000, 291.000000)">
                            <g id="document" transform="translate(154.000000, 300.000000)">
                                <path class="color-background"
                                      d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"
                                      id="Path" opacity="0.603585379"></path>
                                <path class="color-background"
                                      d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"
                                      id="Shape"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>`,

      }
    ],
  },
});
theme: SoftUI({
  sidebar: {
    gestures: {
      disabled: false,
      gestureTimer: 200,
      gestureSensitivity: 50,
    },
  },
});

Props

items
Array
required
id
string
required

The id of the button which shows active when now === id

name
string
required

The name of the link, can also be changed for different languages using locales.partials.sidebar["id"]

icon
string
required

The icon of the item

gestures
Object
required
disabled
boolean
required

Indicate if the sidebar should be disabled

gestureTimer
number

The gesture timer in milliseconds

gestureSensitivity
number

The gesture sensitivity in pixels