added the navbar

DevanshCodes · Feb 20, 2020 · 9d0d5f6 · 9d0d5f6
1 parent 43c59c4
commit 9d0d5f6
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git a/examples/demo.css b/examples/demo.css
@@ -11,12 +11,41 @@
     font-style: normal;
 }
 
-body {
-  padding: 20px;
-  margin: 0 auto 20px;
-  max-width: 1000px;
-  background: #f8f8fa;
+html {
+    scroll-behavior: smooth;
+  }
+
+.sidenav {
+    width: 160px; /* Set the width of the sidebar */
+    z-index: 1; /* Stay on top */
+    left: 0px;
+    margin-top: 38vh;
+    margin-left: 3vh;
+    overflow-x: hidden; /* Disable horizontal scroll */
+    position: absolute;
+
+}
+
+.sidenav a {
+    padding: 6px 8px 6px 16px;
+    text-decoration: none;
+    font-size: 15px;
+    color: #818181;
+    display: block; 
+}
+
+.sidenav a:hover {
+    color: #f1f1f1;
 }
+
+.main {
+    padding: 1.5% 18% 20px;
+    background: #f8f8fa;
+    height: 100vh;
+    overflow-y: scroll;
+    width: 100vw;
+}
+
 
 #forkMe-ribbon {
     width: 10px;

diff --git a/index.html b/index.html
@@ -37,6 +37,16 @@
 
   <body>
 
+    <div class="sidenav">
+      <a href="#top" onclick="home">Home</a>
+      <a href="#fto-issues">FTO issues</a>
+      <a href="#candidates">Candidates</a>
+      <a href="#stale-head">StaleIssues</a>
+      <a href="#contributors">Contributors</a>
+    </div>
+
+    <div class="main">
+
     <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
@@ -51,7 +61,7 @@
 
     <div class="container-fluid">
       <header class="text-center">
-        <h1>Welcome to <span class=" org-display-name">Public Lab</span>'s coding community!</h1>
+        <h1 id="top">Welcome to <span class=" org-display-name">Public Lab</span>'s coding community!</h1>
       </header>
 
       <div id="options-bar">
@@ -144,7 +154,7 @@ <h3>3.<br />Create a welcoming issue for someone else</h3>
 
       <br />
 
-      <h2><span class=" newcomer-issues">first timers only</span> issues</h2>
+      <h2 id="fto-issues"><span class=" newcomer-issues">first timers only</span> issues</h2>
 
       <p>Here are <a  id="newcomer-issues-link" href="https://github.com/publiclab/plots2/labels/first-timers-only">a selection</a> of issues we've <a class=" guidelines-link" href="https://publiclab.org/n/13667">made especially for first-timers</a>. We're here to help, so just ask if one looks interesting, by leaving a comment!</p>
 
@@ -158,7 +168,7 @@ <h2 id="whats-next">What's next?</h2>
 
       <p>In "<span class=" newcomer-like-issues">candidates</span>" below, there are some issues we think would make good <b><span class=" newcomer-issues">first-timers-only</span></b> issues, but haven't finished formatting. They could make a good second-time contribution!</p>
 
-      <h2 class=" newcomer-like-issues">Candidates</h2>
+      <h2 class=" newcomer-like-issues" id="candidates">Candidates</h2>
 
       <p>We put a lot of work into our <span class=" newcomer-issues">first-timer-only</span> issues. But if we haven't been able to prepare any recently, here's a set of <span class=" newcomer-like-issues">candidates</span> we haven't yet had time to prepare, but which have most of the needed information. (Also: Learn how to <a  href="https://publiclab.org/n/13667">help turn these into <span class=" newcomer-issues">first-timers-only</span> issues</a> to help keep welcoming people in!</p>
 
@@ -260,14 +270,15 @@ <h2 class="recent-contributors-head">Recent Contributors</h2>
         </div>
       </div>
 
-      <h2 class="contributors-head">Contributors</h2>
+      <h2 class="contributors-head" id="contributors">Contributors</h2>
       <div class="contribs">
         <div style="display: flex; justify-content: space-between">
           <p>This project was made possible by many contributors, including the following GitHub users:</p>
           <div title="copy to clipboard" class="copybutton"><i class="fa fa-clipboard" aria-hidden="true"></i></div>
         </div>
 
         <div class="well contributors"><div id="spinner-icon" style="text-align: center;"><i class="fa fa-spinner fa-spin"></i></div><p class="usernames"></p><hr /><p class="avatars text-center"></p></div>
+      </div>
       </div>
 
 	  <div class="row" id="connectwithus">