From 83fd1d74ced25517808b2da29f6859851bb0c488 Mon Sep 17 00:00:00 2001
From: Ajdj100 <ajairplane@gmail.com>
Date: Wed, 29 Mar 2023 09:44:08 -0400
Subject: [PATCH] added some sorting options to the filters menu, as well as an
 exit button for the menu. Still not really functional lol

---
 Users Page/page.html  | 44 ++++++++++++++++++++++++++++++-------------
 Users Page/styles.css | 16 +++++++++++++++-
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/Users Page/page.html b/Users Page/page.html
index 37df2c9..81a1be7 100644
--- a/Users Page/page.html	
+++ b/Users Page/page.html	
@@ -44,25 +44,43 @@
             </ul>
         </nav> -->
 
-        <button onclick="showFilters()">Filter</button>
+        <button id="filterButton" onclick="showFilters()">Filter</button>
 
         <div id="filter-box" style="display:none;">
-            <nav class="subnav">
-                <ul class="subnav-links">
-                    <li><a href="#" class="active">All</a></li>
-                    <li><a href="#">Alpha</a></li>
-                    <li><a href="#">Echo</a></li>
-                    <li><a href="#">NCO</a></li>
-                    <li><a href="#">RRC</a></li>
-                    <li><a href="#">HHC</a></li>
-                    <li><a href="#">Recruit</a></li>
-                </ul>
-            </nav>
+            <div>
+                <h2 class="subnav-Header">Filters</h2>
+                <nav class="subnav">
+                    <ul class="subnav-links">
+                        <li><a href="#" class="active">All</a></li>
+                        <li><a href="#">Alpha</a></li>
+                        <li><a href="#">Echo</a></li>
+                        <li><a href="#">NCO</a></li>
+                        <li><a href="#">RRC</a></li>
+                        <li><a href="#">HHC</a></li>
+                        <li><a href="#">Recruit</a></li>
+                        <li><a href="#">Discharged</a></li>
+                    </ul>
+                </nav>
+            </div>
+            <div>
+                <h2 class="subnav-Header">Sort</h2>
+                <nav class="subnav">
+                    <ul class="subnav-links">
+                        <li><a href="#" class="active">None</a></li>
+                        <li><a href="#">Name</a></li>
+                        <li><a href="#">Rank</a></li>
+                        <li><a href="#">Join Date</a></li>
+                        <li><a href="#">LOA Until</a></li>
+                        <li><a href="#">Last Active</a></li>
+                    </ul>
+                </nav>
+            </div>
+            <button onclick="showFilters()" style="height: fit-content;">X</button>
         </div>
         <script> function showFilters() {
                 var filterBox = document.getElementById("filter-box");
                 if (filterBox.style.display === "none") {
-                    filterBox.style.display = "block";
+                    filterBox.style.display = "flex";
                 } else {
                     filterBox.style.display = "none";
                 }
diff --git a/Users Page/styles.css b/Users Page/styles.css
index 15b2eb3..a3ed275 100644
--- a/Users Page/styles.css	
+++ b/Users Page/styles.css	
@@ -116,12 +116,20 @@ th {
 
 .subnav {
   background-color: transparent;
-  height: 40px;
+  height: fit-content;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+.subnav-Header {
+  color: #333333;
+  font-size: 20px;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+}
+
 .subnav-links {
   display: flex;
   flex-direction: column;
@@ -170,8 +178,10 @@ th {
 
 #filter-box {
   display: flex;
+  flex-direction: row;
   position: absolute;
   top: 185px;
+  height: auto;
   left: auto;
   right: 0;
   padding: 10px;
@@ -179,4 +189,8 @@ th {
   border: 1px solid #ccc;
   box-shadow: 0 2px 6px rgba(0,0,0,0.3);
   z-index: 1;
+}
+
+#filterButton {
+  margin-right: 25px;
 }
\ No newline at end of file