Add nav to base layout

src/tailwind.css

@@ -16,4 +16,4 @@
     src: url("../fonts/ApercuMono.ttf") format('truetype');
 }
 
-@tailwind utilities;
+@tailwind utilities;

views/layout.pug

@@ -13,35 +13,42 @@ html
 
         link(rel='stylesheet', href='/stylesheets/style.css')
         block head
-    body
-        article
-            header
-                // Navbar
-                nav.navbar
-                    // Navbar brand
-                    a.navbar-brand(href='/')
-                        span EEEE.
-                    // Collapse button
-                    button.navbar-toggler.ham-button(type='button' data-toggle='collapse' data-target='#navbarSupportedContent23' aria-controls='navbarSupportedContent23' aria-expanded='false' aria-label='Toggle navigation' style='cursor: pointer;')
-                        .ham
-                            span
-                            span
-                            span
-                            span
-                    // Collapsible content
-                    #navbarSupportedContent23.collapse.navbar-collapse
-                        // Links
-                        ul.navbar-nav.mr-auto
-                            block nav-links
+    body.flex.flex-col.min-h-screen.bg-black.text-pink
+        nav
+            div(class="mx-auto px-5")
+                div.relative.flex.items-center.justify-between.h-16
+                    div.flex-shrink-0.flex.items-center
+                        p.block.text-4xl.font-extra.font
+                            a(href="/") EEEE.
+                    
+                    <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">            
+                        <button type="button" class="inline-flex items-center justify-center rounded-md text-pink hover:text-green" aria-controls="mobile-menu" aria-expanded="false">
+                            <span class="sr-only">Open main menu</span>
 
-            main
+                            <svg class="block h-10 w-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                            </svg>
+
+                            <svg class="hidden h-10 w-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+
+
+            <div class="hidden" id="menu">
+                block nav-links
+            </div>                
+
+        main.flex-grow
+            div(class="max-w-5xl mx-auto px-2 sm:px-6 lg:px-8")
                 block content
 
-            footer
-                p &copy; 2020 |
-                    |
-                    |
-                    a(href="/") EEEE.
+        footer
+            p &copy; 2020 |
+                |
+                |
+                a(href="/") EEEE.
 
         script(src="/javascript/jquery-3.5.1.min.js")
         script(src="/javascript/nav.js")