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;