ADD: Navbar

3liz · Oct 2, 2024 · 70bbbeb · 70bbbeb
1 parent 04244f0
commit 70bbbeb
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 0 deletions.
diff --git a/ol-proj4rs-demo-app/reprojection-image.html b/ol-proj4rs-demo-app/reprojection-image.html
@@ -55,6 +55,15 @@ <h3>proj4rs</h3>
 ...</code>
         </pre>
     </div>
+
+    <nav>
+        <a class="navLabel" href="index.html">Home</a><br>
+        <a class="navLabel" href="wms-image-custom-proj.html">Single Image WMS</a><br>
+        <a id="navLabelActive" class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
+        <a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
+        <a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a>
+    </nav>
+
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
     <script type="module" src="reprojection-image.js"></script>

diff --git a/ol-proj4rs-demo-app/reprojection.html b/ol-proj4rs-demo-app/reprojection.html
@@ -83,6 +83,14 @@ <h3>proj4rs</h3>
         </pre>
     </div>
 
+    <nav>
+        <a class="navLabel" href="index.html">Home</a><br>
+        <a class="navLabel" href="wms-image-custom-proj.html">Single Image WMS</a><br>
+        <a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
+        <a id="navLabelActive" class="navLabel" href="reprojection.html">Raster reprojection</a><br>
+        <a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a>
+    </nav>
+
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
     <script type="module" src="reprojection.js"></script>

diff --git a/ol-proj4rs-demo-app/sphere-mollweide.html b/ol-proj4rs-demo-app/sphere-mollweide.html
@@ -52,6 +52,14 @@ <h3>proj4rs</h3>
         </pre>
     </div>
 
+    <nav>
+        <a class="navLabel" href="index.html">Home</a><br>
+        <a class="navLabel" href="wms-image-custom-proj.html">Single Image WMS</a><br>
+        <a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
+        <a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
+        <a id="navLabelActive" class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a>
+    </nav>
+
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
     <script type="module" src="sphere-mollweide.js"></script>

diff --git a/ol-proj4rs-demo-app/style.css b/ol-proj4rs-demo-app/style.css
@@ -9,6 +9,7 @@
 html, body {
   font-family: "Roboto Light", sans-serif;
   text-align: center;
+  margin: 0;
 }
 
 header {
@@ -160,3 +161,68 @@ container > div {
   width: 95%;
   margin: 25px auto;
 }
+
+/* Nav bar */
+
+nav {
+  background-color: white;
+  border-radius: 0 7px 7px 0;
+  position: fixed;
+  width: 40px;
+  height: 250px;
+  top: 15vh;
+  display: flex;
+  flex-direction: column;
+  text-indent: -460%;
+  transition: ease 200ms;
+}
+
+nav > a:first-child {
+  border-radius: 0 10px 0 0;
+  border-top: solid 2px #000000;
+  font-weight: bold;
+}
+
+nav > a:last-child {
+  border-radius: 0 0 10px 0;
+  border-bottom: solid 2px #000000;
+}
+
+nav:hover {
+  width: 200px;
+  text-indent: 0;
+  .navLabel {
+    width: 200px;
+    color: black;
+  }
+  #navLabelActive {
+    color: black;
+  }
+}
+
+.navLabel {
+  border-right: solid 3px #000000;
+  color: black;
+  width: 40px;
+  height: 50px;
+  transition: ease 200ms;
+  text-decoration: none;
+  text-align: center;
+  line-height: 50px;
+}
+
+.navLabel:hover {
+  background-color: rgb(237, 237, 237);
+}
+
+.navLabel:active {
+  background-color: rgb(220, 220, 220);
+}
+
+#navLabelActive {
+  background-color: rgb(220, 220, 220);
+}
+
+#navLabelActive:hover {
+  background-color: rgb(237, 237, 237);
+}
diff --git a/ol-proj4rs-demo-app/wms-image-custom-proj.html b/ol-proj4rs-demo-app/wms-image-custom-proj.html
@@ -46,6 +46,14 @@ <h3>proj4rs</h3>
         </pre>
     </div>
 
+    <nav>
+        <a class="navLabel" href="index.html">Home</a><br>
+        <a id="navLabelActive" class="navLabel" href="wms-image-custom-proj.html">Single Image WMS</a><br>
+        <a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
+        <a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
+        <a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a>
+    </nav>
+
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
     <script type="module" src="wms-image-custom-proj.js"></script>