Overview

The navigation links in the TopBar component are generated from an array defined within the script tag. These links are rendered in the HTML using a Svelte each loop. Each link corresponds to a specific page in the application, and these pages are implemented using the Routify routing approach.

In Routify, to create a new page, you simply create a folder with a desired name, and this name becomes the route for that page. Inside the folder, you create a file called index.svelte, which contains all the business logic and UI for that particular page. This way, the application can dynamically generate navigation links based on the existing pages created using Routify's folder-based routing system.

How to extend

Below is an example on how to add a new nav link called "Shop" to the existing nav links.

Code

  <script lang="ts">
    import { isActive } from "@roxi/routify"

    interface IMenu {
      text: string
      url: string
    }

    const menuItems: IMenu[] = [
      { text: "Dashboard", url: "/private/dashboard" },
      { text: "Contacts", url: "/private/contacts" },
      { text: "Calendar", url: "/private/calendar" },
      { text: "Ledger", url: "/private/ledger" },
      
      // New nav link added
      { text: "Shop", url: "/private/shop" }
    ]
  </script>

  <ul class="hidden sm:ml-6 sm:flex sm:space-x-0">
    {#each menuItems as menutItem (menuItem.text)}
      <li>
        <a href={menuItem.url}
          class="text-gray-400 hover:text-gray-200 hover:border-b-2 inline-flex items-center px-3 pt-1 text-sm font-medium"
          class:active-menu={$isActive(menuItem.url)}
        >
          {menuItem.text.toUpperCase()}
        </a>
      </li>
    {/each}
  </ul>

  <style>
    .active-menu {
      @apply border-[#ce5097] text-white bg-[#23407c] border-b-2
    }
  </style>

Folder Structure