opdavies/rebuilding-bartik
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Mobile nav

Browse source
This commit is contained in:
Oliver Davies 2018-11-19 20:41:47 +00:00
parent cf176215f7
commit 1fdd2a3ddc
3 changed files with 48 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/img/hamburger.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g><path fill="#ffffff" d="M14.752 6h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 0h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .69.56 1.25 1.25 1.25h13.502c.689 0 1.25-.56 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 12h-13.502c-.69 0-1.25.561-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.689-.561-1.25-1.25-1.25z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 510 B

40
src/components/MainMenu.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<div class="bg-blue-dark">
<button
type="button"
class="w-full p-3 block sm:hidden bg-blue-lighter text-sm text-grey-darker text-left focus:outline-none"
@click="open = !open"
>
<div class="flex items-center justify-between">
<div>
{{ navText }} - Main navigation
</div>
<div>
<img src="img/hamburger.svg" alt="">
</div>
</div>
</button>
<div class="container mx-auto px-4">
<nav class="p-1 md:p-0 sm:block" :class="[ open ? 'block' : 'hidden' ]">
<a href="#0" class="inline-block text-sm no-underline text-black bg-white px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg w-full sm:w-1/3 md:w-auto sm:text-center">Home</a>
</nav>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
open: false,
}
},
computed: {
navText: function () {
return this.open ? 'Hide' : 'Show';
}
}
}
</script>

11
src/components/WelcomeToDrupal.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<div class="bg-blue-dark text-white pt-4">
<div class="bg-blue-dark text-white py-4">
<div class="container mx-auto px-4 relative">
<div class="text-sm flex justify-end">
<a href="#0" class="text-white no-underline hover:underline">Log in</a>
@ -13,12 +13,11 @@
</div>
</div>
<nav class="mt-4">
<a href="#0" class="inline-block text-sm no-underline text-black bg-white px-3 py-2 rounded-t-lg">Home</a>
</nav>
</div>
</div>
<main-menu></main-menu>
<div class="bg-white pt-3 pb-4 lg:pb-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row-reverse md:-mx-8 my-6">
@ -72,7 +71,11 @@
</template>
<script>
import MainMenu from './MainMenu.vue';
export default {
components: { MainMenu },
props: {
version: {
type: String,