Add nav to base layout

This commit is contained in:
E 2021-09-11 13:26:44 +01:00
parent 37b22958da
commit cf991fc3da
No known key found for this signature in database
GPG Key ID: 91C5E15B03621D7A
2 changed files with 34 additions and 27 deletions

View File

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

View File

@ -13,35 +13,42 @@ html
link(rel='stylesheet', href='/stylesheets/style.css') link(rel='stylesheet', href='/stylesheets/style.css')
block head block head
body body.flex.flex-col.min-h-screen.bg-black.text-pink
article nav
header div(class="mx-auto px-5")
// Navbar div.relative.flex.items-center.justify-between.h-16
nav.navbar div.flex-shrink-0.flex.items-center
// Navbar brand p.block.text-4xl.font-extra.font
a.navbar-brand(href='/') a(href="/") EEEE.
span EEEE.
// Collapse button <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.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;') <button type="button" class="inline-flex items-center justify-center rounded-md text-pink hover:text-green" aria-controls="mobile-menu" aria-expanded="false">
.ham <span class="sr-only">Open main menu</span>
span
span
span
span
// Collapsible content
#navbarSupportedContent23.collapse.navbar-collapse
// Links
ul.navbar-nav.mr-auto
block nav-links
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 block content
footer footer
p &copy; 2020 | p &copy; 2020 |
| |
| |
a(href="/") EEEE. a(href="/") EEEE.
script(src="/javascript/jquery-3.5.1.min.js") script(src="/javascript/jquery-3.5.1.min.js")
script(src="/javascript/nav.js") script(src="/javascript/nav.js")