Sidebar

Navigation down the left on a computer, a drawer on a phone.

  • kit.sidebar()
  • 1.7 KB of CSS · 51 rules
  • kit.css
  • kit-web.js for its behaviour

Night owls

The room opens here.

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.withSidebar({
      sidebar: kit.sidebar({ id: 'kit-demo-side', label: 'Rooms', nav: [
          { href: '/kit/sidebar', label: 'Night owls', icon: 'chat', active: true },
          { href: '/kit/sidebar', label: 'Robot arms', icon: 'chat' },
          { href: '/kit/sidebar', label: 'Surf crew', icon: 'chat' }] }),
      body: kit.empty({ title: 'Night owls', text: 'The room opens here.' })
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.withSidebar({
        sidebar: OpenVibeKit.sidebar({ id: 'kit-demo-side', label: 'Rooms', nav: [
            { href: '/kit/sidebar', label: 'Night owls', icon: 'chat', active: true },
            { href: '/kit/sidebar', label: 'Robot arms', icon: 'chat' },
            { href: '/kit/sidebar', label: 'Surf crew', icon: 'chat' }] }),
        body: OpenVibeKit.empty({ title: 'Night owls', text: 'The room opens here.' })
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 1.2 KB
<div class="ovk-with-sidebar"><aside class="ovk-sidebar" id="kit-demo-side" aria-label="Rooms" data-ovk-sidebar><div class="ovk-sidebar-top"><button class="ovk-icon-btn ovk-sidebar-close" type="button" data-ovk-sidebar-close aria-label="Close"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.7 3.7l16.7 16.7M20.4 3.7L3.7 20.4"/></svg></button></div><nav class="ovk-sidebar-nav" aria-label="Rooms"><a class="ovk-sidebar-link" href="/kit/sidebar"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.8 4.3h16.8v11.7H8l-4.2 4.2Z"/></svg><span>Night owls</span></a><a class="ovk-sidebar-link" href="/kit/sidebar"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.8 4.3h16.8v11.7H8l-4.2 4.2Z"/></svg><span>Robot arms</span></a><a class="ovk-sidebar-link" href="/kit/sidebar"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.8 4.3h16.8v11.7H8l-4.2 4.2Z"/></svg><span>Surf crew</span></a></nav></aside><div class="ovk-sidebar-scrim" data-ovk-sidebar-scrim hidden></div><div class="ovk-with-sidebar-main"><div class="ovk-empty"><p class="ovk-empty-title">Night owls</p><p>The room opens here.</p></div></div></div>

What it weighs

Its own rules are 7.3 KB, 1.7 KB as sent: 9% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.

It is also drawn natively: Jetpack Compose and SwiftUI.