aboutsummaryrefslogtreecommitdiffhomepage
path: root/index.html
diff options
context:
space:
mode:
authorTrae <trae@traeblain.com>2020-03-13 21:09:20 -0500
committerTrae <trae@traeblain.com>2020-03-13 21:09:20 -0500
commit7cc525b2a65ce07a340562864682e663ab46bb84 (patch)
tree29d965bad36a245a40417e60755c1c8853b30e39 /index.html
parent46fd4f4da18ed505264181cfa8f6a776abef9e2f (diff)
downloadhomer-7cc525b2a65ce07a340562864682e663ab46bb84.tar.gz
homer-7cc525b2a65ce07a340562864682e663ab46bb84.tar.zst
homer-7cc525b2a65ce07a340562864682e663ab46bb84.zip
Added Hamburger Menu for small screens per Bulma spec.
Diffstat (limited to 'index.html')
-rw-r--r--index.html29
1 files changed, 21 insertions, 8 deletions
diff --git a/index.html b/index.html
index 070656d..9c1b531 100644
--- a/index.html
+++ b/index.html
@@ -30,24 +30,37 @@
30 <div v-cloak v-if="config.links" class="container-fluid"> 30 <div v-cloak v-if="config.links" class="container-fluid">
31 <nav class="navbar" role="navigation" aria-label="main navigation"> 31 <nav class="navbar" role="navigation" aria-label="main navigation">
32 <div class="container"> 32 <div class="container">
33 <div class="navbar-menu"> 33 <div class="navbar-brand">
34 <a role="button"
35 class="navbar-burger" :class="{ 'is-active': showMenu }"
36 aria-label="menu" aria-expanded="false"
37 v-on:click="toggleMenu()">
38 <span aria-hidden="true"></span>
39 <span aria-hidden="true"></span>
40 <span aria-hidden="true"></span>
41 </a>
42 </div>
43 <div class="navbar-menu" :class="{ 'is-active': showMenu }">
34 <div class="navbar-start"> 44 <div class="navbar-start">
35 <a v-for="link in config.links" class="navbar-item" :href="link.url" :target="link.target"> 45 <a v-for="link in config.links" class="navbar-item" :href="link.url" :target="link.target">
36 <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i> 46 <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i>
37 {{ link.name }} 47 {{ link.name }}
38 </a> 48 </a>
39 </div> 49 </div>
40 <div class="end"> 50 <div class="navbar-end">
51 <div class="navbar-item">
41 <a 52 <a
42 v-on:click="toggleTheme()" 53 v-on:click="toggleTheme()"
43 aria-label="Toggle dark mode" 54 aria-label="Toggle dark mode"
55 class="icon-button"
44 ><i class="fas fa-adjust"></i> 56 ><i class="fas fa-adjust"></i>
45 </a> 57 </a>
46 <a v-on:click="toggleLayout()" class="icon-button navbar-item"><i 58 <a v-on:click="toggleLayout()" class="icon-button"><i
47 :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a> 59 :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
48 <div class="search-bar"> 60 <div class="search-bar">
49 <label for="search" class="search-label"></label> 61 <label for="search" class="search-label"></label>
50 <input type="text" id="search" v-model="filter" /> 62 <input type="text" id="search" v-model="filter" />
63 </div>
51 </div> 64 </div>
52 </div> 65 </div>
53 </div> 66 </div>