The day has come. Topnav now has mobile support. Is it janky as hell?…

… Yeah. Is it unnecessarily complicated because I'm forcing myself to not use JS? Yeah.
sectorsedgecommunity · Oct 27, 2024 · 5120ade · 5120ade
1 parent f3e8a87
commit 5120ade
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 45 deletions.
diff --git a/community/index.html b/community/index.html
@@ -16,11 +16,25 @@
 <body>
     <div class="nav" data-nosnippet>
         <img class="nav-item nav-logo" draggable="false" src="../public/se_community_logo.svg" height="30px" alt="Sector's Edge icon">
+        <div class="nav-options">
         <a class="nav-item nav-home" href="../index">Home</a>
         <a class="nav-item nav-how-to-play" href="../how-to-play">How to play</a>
         <a class="nav-item nav-community nav-selected" href="../community">Community</a>
-        <a class="nav-item nav-custom-maps" href="../maps">Custom maps</a>
+        <a class="nav-item nav-custom-maps" href="../custom-maps">Custom maps</a>
         <a class="nav-item nav-mapmaking" href="../mapmaking">Mapmaking</a>
+        </div>
+        <div class="mobile-nav-button">
+            <button id="mobile-nav-dropdown">
+                <img class="nav-logo" draggable="false" src="../public/hamburger.png" height="30px" alt="Navigation menu">
+                <div class="mobile-nav-menu">
+                    <a class="nav-item nav-home" href="../index">Home</a>
+                    <a class="nav-item nav-how-to-play" href="../how-to-play">How to play</a>
+                    <a class="nav-item nav-community nav-selected" href="../community">Community</a>
+                    <a class="nav-item nav-custom-maps" href="../custom-maps">Custom maps</a>
+                    <a class="nav-item nav-mapmaking" href="../mapmaking">Mapmaking</a>
+                </div>
+            </button>
+        </div>
     </div>
     <p class="base-text dark-background-centered section-highlight-blue">
         <img class="community-page-logo" src="../public/se_community.png" alt="Sector's Edge Community logo"><br>

diff --git a/custom-maps/index.html b/custom-maps/index.html
@@ -16,13 +16,27 @@
 <body>
     <div class="nav" data-nosnippet>
         <img class="nav-item nav-logo" draggable="false" src="../public/se_community_logo.svg" height="30px" alt="Sector's Edge icon">
+        <div class="nav-options">
         <a class="nav-item nav-home" href="../index">Home</a>
         <a class="nav-item nav-how-to-play" href="../how-to-play">How to play</a>
         <a class="nav-item nav-community" href="../community">Community</a>
-        <a class="nav-item nav-custom-maps nav-selected" href="../maps">Custom maps</a>
+        <a class="nav-item nav-custom-maps nav-selected" href="../custom-maps">Custom maps</a>
         <a class="nav-item nav-mapmaking" href="../mapmaking">Mapmaking</a>
+        </div>
+        <div class="mobile-nav-button">
+            <button id="mobile-nav-dropdown">
+                <img class="nav-logo" draggable="false" src="../public/hamburger.png" height="30px" alt="Navigation menu">
+                <div class="mobile-nav-menu">
+                    <a class="nav-item nav-home" href="../index">Home</a>
+                    <a class="nav-item nav-how-to-play" href="../how-to-play">How to play</a>
+                    <a class="nav-item nav-community" href="../community">Community</a>
+                    <a class="nav-item nav-custom-maps nav-selected" href="../custom-maps">Custom maps</a>
+                    <a class="nav-item nav-mapmaking" href="../mapmaking">Mapmaking</a>
+                </div>
+            </button>
+        </div>
     </div>
-    <div>
+    <div style="margin: 20px" data-nosnippet>
         <p class="maps-tip">Here you can find newer maps which are on the Steam Workshop.<br/>Maps which aren't on the Steam Workshop but are ready to play will be displayed here too.</p>
         <div class="maps_list dark-background-centered section-highlight-blue">
         <div class="map_tile" data-nosnippet>
@@ -97,7 +111,7 @@
             <button class="download-map" title="Download map" onclick="window.location.href='download/corahk_wasteland_novis.zip'"><img draggable="false" class="download-map-icon" src="../public/custommaps/download.png"></button>
             <button class="download-map" title="Go to Steam Workshop page" onclick="window.location.href='https://steamcommunity.com/sharedfiles/filedetails/?id=3337381943'"><img draggable="false" class="download-map-icon" src="../public/custommaps/workshop.png"></button>
         </div>
-        <div class="map_tile" data-nosnippet>
+        <div class="map_tile" data-nosnippet hidden>
             <img draggable="false" class="map_tile_preview" src="../public/custommaps/no_preview.png"><p class="map_tile_name">Workshop map</p>
             <p class="map_tile_author">Author</p>
             <button class="download-disabled" title="Download map"><img draggable="false" class="download-map-icon" src="../public/custommaps/download.png"></button>

diff --git a/how-to-play/index.html b/how-to-play/index.html
@@ -16,11 +16,25 @@
 <body>
     <div class="nav" data-nosnippet>
         <img class="nav-item nav-logo" draggable="false" src="../public/se_community_logo.svg" height="30px" alt="Sector's Edge icon">
+        <div class="nav-options">
         <a class="nav-item nav-home" href="../index">Home</a>
         <a class="nav-item nav-how-to-play nav-selected" href="../how-to-play">How to play</a>
         <a class="nav-item nav-community" href="../community">Community</a>
-        <a class="nav-item nav-custom-maps" href="../maps">Custom maps</a>
+        <a class="nav-item nav-custom-maps" href="../custom-maps">Custom maps</a>
         <a class="nav-item nav-mapmaking" href="../mapmaking">Mapmaking</a>
+        </div>
+        <div class="mobile-nav-button">
+            <button id="mobile-nav-dropdown">
+                <img class="nav-logo" draggable="false" src="../public/hamburger.png" height="30px" alt="Navigation menu">
+                <div class="mobile-nav-menu">
+                    <a class="nav-item nav-home" href="../index">Home</a>
+                    <a class="nav-item nav-how-to-play nav-selected" href="../how-to-play">How to play</a>
+                    <a class="nav-item nav-community" href="../community">Community</a>
+                    <a class="nav-item nav-custom-maps" href="../custom-maps">Custom maps</a>
+                    <a class="nav-item nav-mapmaking" href="../mapmaking">Mapmaking</a>
+                </div>
+            </button>
+        </div>
     </div>
     <div class="base-text dark-background-centered section-highlight-blue">
         <h3>DOWNLOAD THE GAME</h3>

diff --git a/index.html b/index.html
@@ -17,11 +17,25 @@
 <body>
     <div class="nav" data-nosnippet>
         <img class="nav-item nav-logo" draggable="false" src="public/se_community_logo.svg" height="30px" alt="Sector's Edge icon">
+        <div class="nav-options">
         <a class="nav-item nav-home nav-selected" href="index">Home</a>
         <a class="nav-item nav-how-to-play" href="how-to-play">How to play</a>
         <a class="nav-item nav-community" href="community">Community</a>
-        <a class="nav-item nav-custom-maps" href="maps">Custom maps</a>
+        <a class="nav-item nav-custom-maps" href="custom-maps">Custom maps</a>
         <a class="nav-item nav-mapmaking" href="mapmaking">Mapmaking</a>
+        </div>
+        <div class="mobile-nav-button">
+            <button id="mobile-nav-dropdown">
+                <img class="nav-logo" draggable="false" src="public/hamburger.png" height="30px" alt="Navigation menu">
+                <div class="mobile-nav-menu">
+                    <a class="nav-item nav-home nav-selected" href="index">Home</a>
+                    <a class="nav-item nav-how-to-play" href="how-to-play">How to play</a>
+                    <a class="nav-item nav-community" href="community">Community</a>
+                    <a class="nav-item nav-custom-maps" href="custom-maps">Custom maps</a>
+                    <a class="nav-item nav-mapmaking" href="mapmaking">Mapmaking</a>
+                </div>
+            </button>
+        </div>
     </div>
     <p class="base-text dark-background-centered section-highlight-blue">Sector's Edge shut down on December 17th, 2023 due to the overwhelming workload of a multiplayer FPS game and short-lived active playerbase.
         <br><br>

diff --git a/mapmaking/index.html b/mapmaking/index.html
@@ -16,15 +16,27 @@
 <body>
     <div class="nav" data-nosnippet>
         <img class="nav-item nav-logo" draggable="false" src="../public/se_community_logo.svg" height="30px" alt="Sector's Edge icon">
+        <div class="nav-options">
         <a class="nav-item nav-home" href="../index">Home</a>
         <a class="nav-item nav-how-to-play" href="../how-to-play">How to play</a>
         <a class="nav-item nav-community" href="../community">Community</a>
-        <a class="nav-item nav-custom-maps" href="../maps">Custom maps</a>
+        <a class="nav-item nav-custom-maps" href="../custom-maps">Custom maps</a>
         <a class="nav-item nav-mapmaking nav-selected" href="../mapmaking">Mapmaking</a>
+        </div>
+        <div class="mobile-nav-button">
+            <button id="mobile-nav-dropdown">
+                <img class="nav-logo" draggable="false" src="../public/hamburger.png" height="30px" alt="Navigation menu">
+                <div class="mobile-nav-menu">
+                    <a class="nav-item nav-home" href="../index">Home</a>
+                    <a class="nav-item nav-how-to-play" href="../how-to-play">How to play</a>
+                    <a class="nav-item nav-community" href="../community">Community</a>
+                    <a class="nav-item nav-custom-maps" href="../custom-maps">Custom maps</a>
+                    <a class="nav-item nav-mapmaking nav-selected" href="../mapmaking">Mapmaking</a>
+                </div>
+            </button>
+        </div>
     </div>
-    <div class="content" style="display: grid">
-        <iframe src="https://sectorsedgecommunity.github.io/mapping-docs/resources" width="100%" height="100%">
-    </div>
+    <iframe class="mapmaking-embed" src="https://sectorsedgecommunity.github.io/mapping-docs/resources">
 </body>
 
 </html>