Move navbar into a Vue component

source/_partials/nav-item.html.twig

@@ -1,5 +0,0 @@
-<a href="{{ href }}" class="block p-4 border-l-3 sm:border-l-0 sm:border-b-2 sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline {{ page.url matches '#' ~ pattern ~ '#' ? 'border-blue' : 'border-transparent hover:border-grey-light' }} {{ loop.first ? 'border-t border-grey-lighter sm:border-t-0 sm:border-transparent' }}">
-    <span class="flex items-center h-full">
-        {{- title -}}
-    </span>
-</a>

source/_partials/navbar.html.twig

@@ -1,51 +0,0 @@
-<div class="navbar border-bottom border-b border-grey-light mb-6" role="banner">
-    <header class="container mx-auto px-4">
-        <div class="sm:flex">
-            <div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
-                <div class="w-3/4 py-5">
-                    <a href="/" title="Home" class="text-grey-darkest no-underline hover:underline">
-                        {{ site.title }}
-                    </a>
-                </div>
-
-                <div class="w-1/4 text-right sm:hidden">
-                    <button type="button" class="nav-toggle appearance-none">
-                        <svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
-                    </button>
-                </div>
-            </div>
-
-            <nav class="hidden block w-full -mx-4 sm:w-2/3 lg:w-3/4 sm:flex sm:flex-wrap sm:justify-end bg-white absolute sm:relative mt-px border-b sm:border-b-0" role="navigation">
-                {% include 'nav-item' with {
-                    title: 'About',
-                    href: '/',
-                    pattern: '^/.$',
-                } %}
-
-                {% include 'nav-item' with {
-                    title: 'Talks',
-                    href: '/talks',
-                    pattern: '^/talks/?',
-                } %}
-
-                {% include 'nav-item' with {
-                    title: 'Blog',
-                    href: '/blog',
-                    pattern: '^/blog/?',
-                } %}
-
-                {% include 'nav-item' with {
-                    title: 'Book',
-                    href: '/test-driven-drupal',
-                    pattern: '^/test-driven-drupal/?$',
-                } %}
-
-                {% include 'nav-item' with {
-                    title: 'Contact',
-                    href: '/contact',
-                    pattern: '^/contact/?',
-                } %}
-            </nav>
-        </div>
-    </header>
-</div>