minimizable footer

acocalypso · Sep 16, 2024 · 522dfea · 522dfea
1 parent 1588a9d
commit 522dfea
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 7 deletions.
diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
@@ -3,10 +3,15 @@
 export default function Footer() {
   const versionNumber = "2.4.6";
   const [theme] = useState<"light" | "dark">("light");
+  const [isMinimized, setIsMinimized] = useState(false);
+
+  const toggleFooter = () => {
+    setIsMinimized(!isMinimized);
+  };
 
   return (
-    <div className="row">
-      <div className="col-md-12 text-center">
+    <div className="footer-container">
+      {!isMinimized ? (
         <div
           className="footer"
           style={{
@@ -20,9 +25,18 @@ export default function Footer() {
             Copyright Dwarfium &copy; 2024. All rights reserved. Made with{" "}
             <span style={{ color: "red" }}>&#10084;</span> for the Dwarf Device.
           </p>
-          <span className="version-text"> Version: {versionNumber}</span>
+          <span className="version-text">Version: {versionNumber}</span>
+          <button className="footer-toggle-btn" onClick={toggleFooter}>
+            &#9660; {/* Down arrow icon */}
+          </button>
+        </div>
+      ) : (
+        <div className="footer-minimized">
+          <button className="footer-toggle-btn" onClick={toggleFooter}>
+            &#9650; {/* Up arrow icon */}
+          </button>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -987,14 +987,46 @@ img {
     }
 }
 
-.footer {
+.footer-container {
     position: fixed;
     bottom: 0;
     width: 100%;
-    background-color: #00B280;
+    display: flex;
+    justify-content: center;
+  }
+
+  .footer {
+    background-color: #00b280;
     text-align: center;
     color: gainsboro;
-}
+    padding: 10px;
+    width: 100%;
+  }
+
+  .footer-minimized {
+    background-color: #00b280;
+    padding: 2px; 
+    width: 50px; 
+    height: 20px;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%; 
+  }
+
+  .footer-toggle-btn {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 12px; 
+  }
+
+  .footer-toggle-btn:hover {
+    color: lightgray;
+  }
+
 
 .version-text {
     margin-right: 0px;