Overview

The TopBar component includes action buttons that serve as the last section. These buttons provide access to the chat and help pages. Depending on your specific requirements, you have the flexibility to enhance these actions by linking them to a page, calling a specific component, or performing any relevant task.

The icons utilized in the TopBar component are sourced from Hero Icons and Remix Icons libraries, offering a variety of visual elements to complement the action buttons' functionality.

How to extend

Below is an example on how to add a new button to the exisitng action buttons. This new button will navigate users to google.

Code

  <script lang="ts">
    import { Icon } from "@steeze-ui/svelte-icon"
    import { ChatAlt2, InformationCircle } from "@steeze-ui/heroicons"
    import { Google } from "@steeze-ui/remix-icons"
  </script>

  <div>
    <div> Logo </div>
    <div> Nav Links </div>
    <div> User Details </div>

    <!-- Action buttons start -->

    {#if hasPermission(Permissions.canChat)}
      <div class="flex mr-2 cursor-pointer text-white hover:text-gray-100" class:text-slate-400={!$showChat} on:click={toggleChat}>
        <Icon src={ChatAlt2} theme="solid" size="30"/>
        {#if $notices.length}
          <div class="badge badge-error badge-sm -ml-2 border border-white"></div>
        {/if}
      </div>
    {/if}
    <a class="flex mr-2 cursor-pointer text-slate-400 hover:text-gray-100" href="https://help.my-hippo.io/" target="_blank">
      <Icon src={InformationCircle} theme="solid" size="30"/>
    </a>
    <a class="flex mr-2 cursor-pointer text-slate-400 hover:text-gray-100" href="https://www.goggle.com" target="_blank">
      <Icon src={Google} theme="solid" size="30"/>
    </a>

    <!-- Action buttons end -->
  </div>