Navigation

Lets create a simple navgation view that so that we can navigate between the two pages we just created.

Let's continue by creating a new directory named "layout" and a new template view file inside that directory: src/templates/layout/navigation.js. You're free to 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(data, container, helper, builder) {
    const pages = (data.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.

Show the navigation

We want to show the navigation on all the pages but it is not very efficent to manually add the navigation to every page. We rather want to add it to the main global view.

Let's proceed by opening the main JavaScript filesrc/main.js.

Start by importing the navigation at the top

import navigation from '@/templates/layout/navigation';

Edit the mount code by adding the navigation with the Stratox view shortcut this.partial(navigation, request).

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

I've demonstrated adding views in previous examples. Now, I'm introducing a shortcut called "partial" to display views. Despite its novelty, it operates similarly to other view integrations, serving as a convenient shortcut.

Visit your browser to see the results.

Last updated