Adjust TabBar and Tab to be more like previous navigations I've written

import { Tab } from "./components/pieces/Tab.mjs"

// TabBar.mjs

const TabBar = {

export default {

    view () {

        const tabs = [

            { id: "all", label: "Alle" },

            { id: "favorites", label: "Favoriten" },

            // { id: 'popular', label: 'Beliebt' } // 'Beliebt' als Option

        ]

        return m(

            "nav",

            tabs.map(it => m(Tab, it)),

        )

    },

        return m("nav", [

            m(Tab, {

                href: "/all",

                label: "Alle"

            }),

            m(Tab, {

                href: "/favorites",

                label: "Favoriten"

            }),

            // TODO We could enable this some time in the future

            false && m(Tab, {

                href: "/popular",

                label: "Beliebt"

            })

        ])

    }

}

export default TabBar

export const Tab = {

    view(vnode) {

        const route = `/${vnode.attrs.id}`

        return m(

            m.route.Link,

            {

                class: m.route.get() === route ? "active" : "",

                href: route,

                class: m.route.get() === vnode.attrs.href ? "active" : "",

                href: vnode.attrs.href,

                role: "button", // Für Barrierefreiheit

                tabindex: 0, // Für Tastaturnavigation

            },