Add FloatingMenu component and integrate DocsButton; update styles for ThemeButton and FloatingMenu

frontend/src/App.jsx

@@ -5,19 +5,19 @@ import 'bootstrap/dist/js/bootstrap.bundle.min.js'
 
 import Dashboard from '@/pages/Dashboard.jsx'
 import Groups from '@/pages/Groups.jsx'
-import ThemeButton from '@/components/layout/ThemeButton.jsx'
 import Header from '@/components/layout/Header.jsx'
 import GroupView from '@/pages/GroupView.jsx'
 
 import { Routes, Route } from 'react-router-dom'
-import ContentWrapper from './components/layout/ContentWrapper'
-import Docs from './pages/Docs'
+import ContentWrapper from '@/components/layout/ContentWrapper'
+import Docs from '@/pages/Docs'
+import FloatingMenu from '@/components/layout/FloatingMenu'
 
 const App = () => {
 
   return (
     <>
-      <ThemeButton />
+      <FloatingMenu />
       <Header subtitle='Midiendo la calidad del aire y las calles en Sevilla 🌿🚛' />
       <ContentWrapper>
         <Routes>

frontend/src/components/layout/DocsButton.jsx

@@ -0,0 +1,12 @@
+import "@/css/DocsButton.css";
+import { Link } from "react-router-dom";
+
+const DocsButton = () => {
+    return (
+        <Link to="/docs">
+            <button className="docs-button">📃</button>
+        </Link>
+    );
+}
+
+export default DocsButton;

frontend/src/components/layout/FloatingMenu.jsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import DocsButton from "./DocsButton";
+import ThemeButton from "./ThemeButton";
+import "@/css/FloatingMenu.css";
+import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const FloatingMenu = () => {
+  const [open, setOpen] = useState(false);
+
+  const buttonVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: (i) => ({
+      opacity: 1,
+      y: 0,
+      transition: { delay: i * 0.05, type: "spring", stiffness: 300 }
+    }),
+    exit: { opacity: 0, y: 10, transition: { duration: 0.1 } }
+  };
+
+  const buttons = [
+    { component: <DocsButton />, key: "docs", onClick: () => setOpen(false) },
+    { component: <ThemeButton />, key: "theme", onClick: () => setOpen(false) }
+  ];
+
+  return (
+    <div className="floating-menu">
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            className="menu-buttons"
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+          >
+            {buttons.map((btn, i) => (
+              <motion.div
+                key={btn.key}
+                custom={i}
+                variants={buttonVariants}
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+                onClick={btn.onClick}
+              >
+                {btn.component}
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <button className="menu-toggle" onClick={() => setOpen(prev => !prev)}>
+        <FontAwesomeIcon icon={faEllipsisVertical} className="fa-lg" />
+      </button>
+    </div>
+  );
+};
+
+export default FloatingMenu;

frontend/src/css/DocsButton.css

@@ -0,0 +1,19 @@
+.docs-button {
+    z-index: 1000;
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-color);
+    color: white;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.docs-button:hover {
+    background-color: var(--secondary-color);
+}

frontend/src/css/FloatingMenu.css

@@ -0,0 +1,55 @@
+.floating-menu {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 10px;
+}
+
+.menu-buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 10px;
+}
+
+.menu-toggle {
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-color);
+    color: white;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.menu-toggle:hover {
+    background-color: var(--secondary-color);
+}
+
+.menu-buttons button {
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-color);
+    color: white;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.menu-buttons button:hover {
+    background-color: var(--secondary-color);
+}

frontend/src/css/ThemeButton.css

@@ -1,7 +1,4 @@
 .theme-toggle {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
     z-index: 1000;
     border: none;
     border-radius: 50%;
@@ -19,4 +16,4 @@
 
 .theme-toggle:hover {
     background-color: var(--secondary-color);
-}
+}