Navigation

Let's create a simple navigation view so that we can navigate between the two pages we just created.

Creating the Navigation View

Create a new directory named "layout" and add a new template view file inside that directory: src/templates/views/Navigation.js. You can name the directory whatever you like or add the navigation view inside the "views" directory—it's entirely up to you.

import logo from '@/assets/images/logo-stratox.svg';

export default function Navigation(props, container, helper, context) {
    const pages = (props.vars?.[0] ?? []);
    const currentPage = pages.pop();

    function isActive(slug) {
        return ((currentPage ?? false) === slug) ? " underline" : "";
    }

    return `
    <header id="header" class="card-4 border-bottom items">
        <figure id="logo" class="headline-6 m-0">
            <img width="150" height="42" src="${logo}" alt="Stratox logotype">
        </figure>
        <nav class="ml-auto">
            <ul class="items gap-x-25">
                <li class="nav-item${isActive(false)}"><a class="nav-to-btn" href="#">Start</a></li>
                <li class="nav-item${isActive("about")}"><a class="nav-to-btn" href="#about">About</a></li>
            </ul>
        </nav>
    </header>
    `;
}

I have also added some styles and a logotype to make it look good.

Showing the Navigation

We want to show the navigation on all the pages, but it is not very efficient to manually add the navigation to every page. Instead, we want to add it to the main global view.

Let's proceed by opening the main JavaScript file: src/main.js.

1. Start by importing the navigation at the top:

import Navigation from '@/templates/views/Navigation';

1. Edit the mount code by adding the navigation. You can extend Stratox views with this.block. Block view is a self-contained dynamic view.

app.setup("#app").mount(routes, app.serverParams("fragment"), function(response, request) {
    return `
        ${this.block(Navigation, request)}
        <main>
            ${response}
        </main>
    `;
});

Visit your browser to see the results.