From 2fd6861fb72dcd0cd41bd014fda6b44a172c496b Mon Sep 17 00:00:00 2001
From: oceanlvr <36698124+oceanlvr@users.noreply.github.com>
Date: Sat, 31 Jul 2021 22:41:15 +0800
Subject: refactor(docs): refactor man & index page (#1472)

---
 _includes/header-nng.html | 91 +++++++++++++++++++++++++++++++++++++----------
 1 file changed, 73 insertions(+), 18 deletions(-)

(limited to '_includes/header-nng.html')

diff --git a/_includes/header-nng.html b/_includes/header-nng.html
index 2ea7d51d..1f1a112b 100644
--- a/_includes/header-nng.html
+++ b/_includes/header-nng.html
@@ -1,20 +1,75 @@
 <header class="nn-header">
-        <div class="nn-header-inner">
-                <a href="https://nng.nanomsg.org" class="nn-logo">
-                        <span class="nn-black">NN</span><span class="nn-tan">G</span>
-                </a>
-
-                <ul class="nn-nav-menu">
-                        <li class="nn-nav-item">
-                                <a href="https://nng.nanomsg.org/man/" class="nn-nav-link">Documentation</a>
-                        </li>
-                        <li class="nn-nav-item">
-                                <a href="https://discord.gg/Xnac6b9" class="nn-nav-link">Discord</a>
-                        </li>
-
-                        <li class="nn-nav-item">
-                                <a href="https://github.com/nanomsg/nng" class="nn-nav-link">GitHub</a>
-                        </li>
-                </ul>
+        <div class="nn-header-inner container">
+                <nav class="navbar" role="navigation" aria-label="navigation">
+                        <div class="navbar-brand">
+                                <a class="navbar-item" href="/">
+                                        <img width="54" height="36" src="/assets/image/NNg-white.png">
+                                </a>
+                                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
+                                        data-target="navbarBasicExample">
+                                        <span aria-hidden="true"></span>
+                                        <span aria-hidden="true"></span>
+                                        <span aria-hidden="true"></span>
+                                </a>
+                        </div>
+                        <div id="navbarBasicExample" class="navbar-menu">
+                                <div class="navbar-start"></div>
+                                <div class="navbar-end">
+                                        <div class="navbar-item">
+                                                <a href="/man/">
+                                                        <i class="iconfont icon-doc"></i>
+                                                </a>
+                                        </div>
+                                        <div class="navbar-item">
+                                                <a href="https://discord.gg/Xnac6b9">
+                                                        <i class="iconfont icon-discord"></i>
+                                                </a>
+                                        </div>
+                                        <div class="navbar-item is-hidden-desktop">
+                                                <a href="https://github.com/nanomsg/nng">
+                                                        Github
+                                                </a>
+                                        </div>
+                                        <div class="navbar-item is-hidden-touch">
+                                                <a href="https://github.com/nanomsg/nng">
+                                                        <i class="iconfont icon-github"></i>
+                                                </a>
+                                        </div>
+                                        <div class="navbar-item is-hidden-touch">
+                                                <a href="https://github.com/nanomsg/nng/releases" class="btn-download">
+                                                        <i class="iconfont icon-download"></i> Download
+                                                </a>
+                                        </div>
+                                </div>
+                        </div>
+                </nav>
         </div>
-</header>
+        <script defer>
+                document.addEventListener('DOMContentLoaded', () => {
+                        // Get all "navbar-burger" elements
+                        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(
+                                '.navbar-burger'), 0);
+                        // Check if there are any navbar burgers
+                        if ($navbarBurgers.length > 0) {
+                                // Add a click event on each of them
+                                $navbarBurgers.forEach(el => {
+                                        el.addEventListener('click', () => {
+                                                // Get the target from the "data-target" attribute
+                                                const target = el
+                                                        .dataset.target;
+                                                const $target = document
+                                                        .getElementById(
+                                                                target);
+                                                el.classList.toggle(
+                                                        'is-active'
+                                                );
+                                                $target.classList
+                                                        .toggle(
+                                                                'is-active'
+                                                        );
+                                        });
+                                });
+                        }
+                });
+        </script>
+</header>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2