opdavies/cardiffbjj.co.uk
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improve mobile nav

Browse source 
Fixes #3
This commit is contained in:
Oliver Davies 2018-07-23 12:06:10 +01:00
parent bddd6c20ae
commit b5cb604aa8
5 changed files with 47 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
assets/js/components/MobileNav.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<div>
<button
type="button"
class="block sm:hidden p-2 bg-red rounded border border-white text-white absolute pin-t pin-r mr-4"
@click="open = !open"
>
<svg v-if="open" class="block fill-current text-white w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
<svg v-else class="block fill-current text-white w-8 h-8" 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 class="absolute pin-l pin-r pin-t mt-16 mx-10 sm:hidden" v-show="open">
<nav class="w-full border border-grey-light bg-red-90">
<a class="w-full p-3 block no-underline text-white border-b border-grey-light" href="#">Coaches</a>
<a class="w-full p-3 block no-underline text-white border-b border-grey-light" href="#">Schedule</a>
<a class="w-full p-3 block no-underline text-white border-b border-grey-light" href="#">Membership</a>
<a class="w-full p-3 block no-underline text-white" href="#">Contact</a>
</nav>
</div>
</div>
</template>
<script>
export default {
data() {
return {
open: false,
}
}
}
</script>

8
assets/js/site.js Normal file
View file

@ -0,0 +1,8 @@
import Vue from 'vue'
import MobileNav from './components/MobileNav'
new Vue({
el: '#root',
components: { MobileNav },
})

8
source/_layouts/default.html.twig
View file

@ -9,16 +9,18 @@
<body class="text-black bg-grey-lightest font-sans text-sm sm:text-base">
<div id="root">
<div class="bg-grey-darkest text-white antialiased block pt-4 pb-10">
<div class="container mx-auto px-4">
<div class="text-center text-4xl">
<div class="container mx-auto px-4 relative">
<div class="text-center text-4xl relative">
<img src="/assets/images/logo.png" alt="" class="w-16 sm:w-24 mb-3 sm:mb-4">
<p class="uppercase font-bold tracking-wide mb-2 text-2xl sm:text-4xl">Chris Rees Academy</p>
<p class="uppercase font-bold tracking-wide text-3xl sm:text-5xl">Cardiff</p>
</div>
<mobile-nav></mobile-nav>
</div>
</div>
<div class="bg-red text-white">
<div class="bg-red text-white hidden sm:block">
<div class="container mx-auto">
<nav class="sm:flex sm:justify-center text-center">
<a href="/" class="md:text-lg block sm:inline-block w-full sm:w-auto text-white hover:text-green no-underline hover:underline px-8 py-5 {{ page.url == '//' ? 'text-green' }}">Coaches</a>

2
tailwind.js
View file

@ -56,6 +56,8 @@ let colors = {
'red': '#a42e27',
'red-dark': '#3a1d19',
'red-90': 'rgba(164, 46, 39, .9)',
'green': '#bada55',
}

2
webpack.mix.js
View file

@ -5,7 +5,7 @@ require('laravel-mix-tailwind');
mix.disableNotifications()
.sass('assets/sass/app.sass', "source/build/css")
.js('node_modules/vue/dist/vue.js', 'source/build/js/all.js')
.js(['node_modules/vue/dist/vue.js', 'assets/js/site.js'], 'source/build/js/all.js')
.tailwind()
.options({
processCssUrls: false,