resolves #113 add communication links, including community chat, to navbar (PR #114)

Author: mojavelinux

src/css/header.css

@@ -206,6 +206,14 @@ div.navbar-link {
   font-size: calc(12 / var(--rem-base) * 1rem);
 }
 
+.navbar-dropdown .navbar-item.has-icon {
+  justify-content: flex-start;
+}
+
+.navbar-dropdown .navbar-item.has-icon .icon {
+  margin-right: 1.25ex;
+}
+
 .navbar-divider {
   background-color: var(--navbar-menu-border-color);
   border: none;
@@ -259,6 +267,14 @@ div.navbar-link {
   .navbar-dropdown .navbar-divider {
     margin-left: 1.5rem;
   }
+
+  .navbar-item[data-title]::before {
+    content: attr(data-title);
+  }
+
+  .navbar-item[data-title] .icon {
+    display: none;
+  }
 }
 
 @media screen and (min-width: 1024px) {
@@ -319,7 +335,8 @@ div.navbar-link {
 
   .navbar-end > a.navbar-item:hover,
   .navbar-end .navbar-link:hover,
-  .navbar-end .navbar-item.has-dropdown:hover .navbar-link {
+  .navbar-end .navbar-item.has-dropdown:hover .navbar-link,
+  .navbar-end .navbar-item.has-dropdown:hover > a.navbar-item {
     background: var(--navbar_hover-background);
     color: var(--navbar-font-color);
   }
@@ -364,6 +381,10 @@ div.navbar-link {
     border-radius: inherit;
   }
 
+  .navbar-dropdown .navbar-item .icon img {
+    filter: none;
+  }
+
   .navbar-dropdown.is-right {
     left: auto;
     right: 0;

src/img/octicons-16.svg

@@ -90,9 +90,29 @@
             <a class="navbar-item" href="https://intellij-asciidoc-plugin.ahus1.de/docs" target="_blank" rel="noopener">IntelliJ Plugin</a>
           </div>
         </div>
-        <a class="navbar-item" href="https://github.com/asciidoctor" target="_blank" rel="noopener">
-          <span class="icon"><img src="{{{uiRootPath}}}/img/octicons-16.svg#view-mark-github"></span>
-        </a>
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-item" href="https://asciidoctor.zulipchat.com" target="_blank" rel="noopener" data-title="Communication">
+            <span class="icon"><img src="{{{uiRootPath}}}/img/octicons-24.svg#view-comment-discussion"></span>
+          </a>
+          <div class="navbar-dropdown is-right">
+            <a class="navbar-item has-icon" href="https://asciidoctor.zulipchat.com" target="_blank" rel="noopener">
+              <span class="icon"><img src="{{{uiRootPath}}}/img/octicons-16.svg#view-comment-discussion"></span>
+              <span>Chat</span>
+            </a>
+            <a class="navbar-item has-icon" href="https://discuss.asciidoctor.org" target="_blank" rel="noopener">
+              <span class="icon"><img src="{{{uiRootPath}}}/img/octicons-16.svg#view-mail"></span>
+              <span>List</span>
+            </a>
+            <a class="navbar-item has-icon" href="https://github.com/asciidoctor" target="_blank" rel="noopener">
+              <span class="icon"><img src="{{{uiRootPath}}}/img/octicons-16.svg#view-mark-github"></span>
+              <span>Source</span>
+            </a>
+            <a class="navbar-item has-icon" href="https://twitter.com/asciidoctor" target="_blank" rel="noopener">
+              <span class="icon"><img src="{{{uiRootPath}}}/img/octicons-16.svg#view-hash"></span>
+              <span>Tweets</span>
+            </a>
+          </div>
+        </div>
       </div>
     </div>
   </nav>