apertium · nathanchi · Nov 14, 2018 · Nov 14, 2018 · Nov 14, 2018 · Nov 14, 2018
diff --git a/source-browser.html b/source-browser.html
@@ -10,29 +10,51 @@
     <link rel="stylesheet" href="https://unpkg.com/basscss@7.1.1/css/basscss.min.css" integrity="sha384-/biuPsPEkt10QoeOExIADuWNrpFFXALKPgBhEDkRdKDJdQOPpbNU3uUeFbL/KPJg" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.5.0/hint.base.min.css" integrity="sha256-ODFgZG+Y3V10lzZu+7J8epM4SdW0w3p8qbVmmShNrtk=" crossorigin="anonymous">
     <style type="text/css">
+      #navbar li a {
+        padding: 14px 16px;
+      }
+
+      .topic-heading {
+        line-height: 0;
+        display: block;
+        top: -90px;
+        visibility: hidden;
+      }
+
+      #navbar {
+        background-color:#2e2e2e;
+        list-style: none;
+      }
+
       #content {
-        margin-top: 75px;
+        margin: 75px 1rem 100px;
         overflow-x: hidden;
       }
+
       #logo-text {
         color: #808080;
         font-family: 'DejaVu Sans', 'DejaVu Sans Fallback', 'Arial #000', Arial;
         font-size: 2.25em;
         margin-left: -10px;
       }
+
       .topic {
         min-width: 215px;
       }
+
       #loading {
         animation: spin 2.5s infinite linear;
       }
+
       @keyframes spin {
         from {transform:rotate(0deg);}
         to {transform:rotate(360deg);}
       }
+
       a.text-decoration-none:hover {
         text-decoration: none;
       }
+
       [class*="hint--"][aria-label]:after {
         white-space: normal;
         line-height: 1.4em;
@@ -41,8 +63,9 @@
       }
     </style>
   </head>
-  <body class="m2">
-    <div class="fixed top-0 col-12 py1 mr3 bg-white z1">
+  <body>
+    <ul id="navbar" class="fixed m0 p0 overflow-hidden bg-black bottom-0 col-12 z2"></ul>
+    <div class="fixed top-0 col-12 py1 mr3 bg-white z1 ml2">
       <a href="https://apertium.org" target="_blank" rel="noopener" class="mt2 text-decoration-none nowrap"> <!-- apertium.org is slow and hosts a large version -->
         <img id="logo" alt="Apertium" height="50" src="data:image/png;base64,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">
         <span id="logo-text" class="bold italic align-top">Apertium</span>
@@ -59,7 +82,7 @@
       <h1 id="loading" class="m1 center display-none">⌛</h1>
       <div id="topics" class="flex flex-wrap col-12 mt1"></div>
     </div>
-    <a class="fixed right-0 bottom-0 mr2 mb2 text-decoration-none h2" id="refresh" href="#">🔄</a>
+    <a class="fixed right-0 bottom-0 mr2 mb4 text-decoration-none h2 z3" id="refresh" href="#">🔄</a>
 
     <script type="text/javascript" src="https://unpkg.com/zepto@1.2.0/dist/zepto.js" integrity="sha384-Cp3V2nlfJJ5aA0ctd1PkfNAEMkXM0EGa6RrmEgiv8D6TCaeZJfUFs/PYfR+B5F5H" crossorigin="anonymous"></script>
     <script type="text/javascript">
@@ -132,7 +155,8 @@ <h1 id="loading" class="m1 center display-none">⌛</h1>
           $('#topics').append(
             $('<div class="topic flex-auto">').append(
               $('<div>').append(
-                $('<h2 class="inline-block m0">').text(name),
+                $('<h2 class="inline-block m0 relative topic-heading">', {id: `${name}-space`}),
+                $('<h2 class="inline-block m0">', {id: name}).text(name),
                 $('<a class="ml1 text-decoration-none" target="_blank" rel="noopener">🔗</a>', {
                   href: repoUrl,
                 }),
@@ -181,7 +205,34 @@ <h1 id="loading" class="m1 center display-none">⌛</h1>
           .focus();
       }
 
+      function drawNavbar() {
+        $('#navbar').append(
+          TOPICS.map(({ name }) =>
+            $('<li class="left">', {id: `${name}-nav-list`}).append(
+              $('<a class="inline-block white center btn:hover btn">', {
+                id: `${name}-nav-link`,
+                href: `#${name}-space`
+              }).text(name)
+            )
+          )
+        );	
+      }
+
+      function updateNavbarVisibility() {
+        const top = $(window).scrollTop();
+        const bottom = top + $(window).height();
+        TOPICS.forEach(({ name }) => {
+          const navLinkPosition = $(`#${name}`).position().top;
+          $(`#${name}-nav-link`).text(`${name} ${navLinkPosition > bottom ? '↓' : '↑'}`);
+          $(`#${name}-nav-list`).toggle(top >= navLinkPosition || navLinkPosition >= bottom);		
+        });
+      };
+
+
       $(document).ready(() => {
+        $(window).on('scroll resize load', updateNavbarVisibility);
+        drawNavbar();
+
         $('#github-link').attr('href', `https://github.com/${ORGANIZATION}`);
         $('#refresh').click(({ currentTarget }) => {
           currentTarget.blur();