Navbar Vue Component

<template>
  <k-page>
    <k-navbar title="Navbar" subtitle="Subtitle" class="top-0 sticky">
      
      <template #right>
        <k-link navbar>Right</k-link>
      </template>
    </k-navbar>
    <div class="relative">
      <k-block strong>
        <p>
          Navbar is a fixed area at the top of a screen that contains Page title
          and navigation elements.
        </p>
      </k-block>
    </div>
  </k-page>
</template>

<script>
  import { kPage, kNavbar, kNavbarBackLink, kLink, kBlock } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kLink,
      kBlock,
    },

  };
</script>

<template>
  <k-page>
    <k-navbar title="Subnavbar">
      
      <template #subnavbar>
        <k-segmented strong>
          <k-segmented-button small strong active> Button </k-segmented-button>
          <k-segmented-button small strong> Button </k-segmented-button>
          <k-segmented-button small strong> Button </k-segmented-button>
        </k-segmented>
      </template>
    </k-navbar>
    <div class="relative">
      <k-block strong>
        <p>
          Subnavbar is useful when you need to put any additional elements into
          Navbar, like Tab Links or Search Bar. It also remains visible when
          Navbar hidden.
        </p>
      </k-block>
    </div>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlock,
    kSegmented,
    kSegmentedButton,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlock,
      kSegmented,
      kSegmentedButton,
    },

  };
</script>