diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
index bef03eaf..9cf2e6e8 100644
--- 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 (
-
-
+
+ {!isMinimized ? (
❤ for the Dwarf Device.
- Version: {versionNumber}
+ Version: {versionNumber}
+
+
+ ) : (
+
+
-
+ )}
);
}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ef8beaa5..dfce9304 100644
--- 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;