]> git.immae.eu Git - github/bastienwirtz/homer.git/blobdiff - index.html
Merge pull request #27 from traeblain/feature-burger
[github/bastienwirtz/homer.git] / index.html
index 8f54b422f52ac5599671ad9721959594275c85d3..9c1b531f65f836a6e7c682845c66aaa075c32b20 100644 (file)
@@ -13,7 +13,7 @@
 </head>
 
 <body>
-  <div id="app" v-if="config" :class="[isDark ? 'is-dark' : 'is-light']">
+  <div id="app" v-if="config" :class="[isDark ? 'is-dark' : 'is-light', !config.footer ? 'no-footer': '']">
     <div id="bighead">
       <section class="first-line">
         <div v-cloak class="container">
       <div v-cloak v-if="config.links" class="container-fluid">
         <nav class="navbar" role="navigation" aria-label="main navigation">
           <div class="container">
-            <div class="navbar-menu">
+            <div class="navbar-brand">
+              <a role="button" 
+                class="navbar-burger" :class="{ 'is-active': showMenu }" 
+                aria-label="menu" aria-expanded="false"
+                v-on:click="toggleMenu()">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+              </a>
+            </div>
+            <div class="navbar-menu" :class="{ 'is-active': showMenu }">
               <div class="navbar-start">
-                <a v-for="link in config.links" class="navbar-item" :href="link.url">
+                <a v-for="link in config.links" class="navbar-item" :href="link.url" :target="link.target">
                   <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i>
                   {{ link.name }}
                 </a>
               </div>
-              <div class="end">
+              <div class="navbar-end">
+                <div class="navbar-item">
                   <a
                     v-on:click="toggleTheme()"
                     aria-label="Toggle dark mode"
+                    class="icon-button"
                     ><i class="fas fa-adjust"></i>
-                </a>
-                <a v-on:click="toggleLayout()" class="icon-button navbar-item"><i
-                    :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
-                <div class="search-bar">
-                  <label for="search" class="search-label"></label>
-                  <input type="text" id="search" v-model="filter" />
+                  </a>
+                  <a v-on:click="toggleLayout()" class="icon-button"><i
+                      :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
+                  <div class="search-bar">
+                    <label for="search" class="search-label"></label>
+                    <input type="text" id="search" v-model="filter" />
+                  </div>
                 </div>
               </div>
             </div>
     </section>
     <footer class="footer">
         <div class="container">
-          <div class="content has-text-centered">
-            <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a
-                href="https://vuejs.org/">vuejs</a>
-              & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i
-                  class="fab fa-github-alt"></i></a></p>
+          <div class="content has-text-centered" v-if="config.footer" v-html="config.footer">
+            
           </div>
         </div>
       </footer>