Added sidebar toggler

camptocamp · Nov 11, 2024 · 3dc1a1a · 3dc1a1a
1 parent 112a0a8
commit 3dc1a1a
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 19 deletions.
diff --git a/src/index.html b/src/index.html
@@ -6,25 +6,38 @@
 </head>
 
 <body>
-    <header>Mapslicer</header>
-    <nav>
-        <div class="caption">Settings</div>
-        <div class="toolbox">
-            <div class="row">
-                <div class="name">Grid size, m</div>
-                <div class="value">
-                    <input type="text" id="gridsize" value="50">
+    <!-- Independent controls -->
+    <input type="file" id="fileDialog">
+    <input type="checkbox" id="sidebar-toggler" />
+
+    <!-- App -->
+    <div class="content">
+        <header>Mapslicer</header>
+        <nav class="sidebar">
+            <div class="caption">Settings</div>
+            <div class="toolbox">
+                <div class="row">
+                    <div class="name">Grid size, m</div>
+                    <div class="value">
+                        <input type="text" id="gridsize" value="50">
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="caption">Selected as GeoJSON</div>
-        <div class="featurebox"><pre>Featurebox</pre></div>
-    </nav>
-    <article>
-        <div id="map" class="map" tabindex="0"></div>
-    </article>
-    <footer>Footer</footer>
-    <input type="file" id="fileDialog">
+            <div class="caption">Selected as GeoJSON</div>
+            <div class="featurebox">
+                <pre>GeoJSON</pre>
+            </div>
+        </nav>
+        <article>
+            <div class="controls">
+                <label for="sidebar-toggler">
+                    <div class="toggler">?</div>
+                </label>
+            </div>
+            <div id="map" class="map" tabindex="0"></div>
+        </article>
+        <footer>Footer</footer>
+    </div>
     <script type="module" src="main.ts"></script>
 </body>
 

diff --git a/src/style.css b/src/style.css
@@ -24,10 +24,12 @@ body {
   font-family: sans-serif;
 }
 
-body {
+.content {
+  width: 100%;
+  height: 100%;
   display: grid;
   grid-template-rows: 40px auto 32px;
-  grid-template-columns: 300px auto;
+  grid-template-columns: min-content auto;
 }
 
 header {
@@ -141,4 +143,52 @@ footer {
 .toolbox .row input {
   width: 100%;
   height: 100%;
+}
+
+article {
+  position: relative;
+}
+
+article .controls {
+  height: 100%;
+  width: auto;
+  position:absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+}
+
+article .controls .toggler {
+  border-radius: 0 6px 6px 0;
+  border: solid 1px var(--primary-variant);
+  padding: 6px;
+  cursor: pointer;
+  border-left: 0px;
+  background-color: white;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+}
+
+#sidebar-toggler {
+  display: none;
+}
+
+
+#sidebar-toggler:checked + label .toggler {
+  background-color: white;
+}
+
+.sidebar {
+  width: 300px;
+}
+
+#sidebar-toggler:checked~.content .sidebar {
+  display: none;
+}
+
+#sidebar-toggler:checked~.content {
+  grid-template-columns: 100%;
 }