diff --git a/src/components/common/FloatingMenu.css b/src/components/common/FloatingMenu.css new file mode 100644 index 00000000..e4a1844a --- /dev/null +++ b/src/components/common/FloatingMenu.css @@ -0,0 +1,35 @@ + +.fab-container { + position: fixed; + bottom: 35px; + right: 30px; + z-index: 1050; + display: flex; + flex-direction: column; + align-items: end; +} + +.fab-main { + /* width: 45px; + height: 45px; + border-radius: 100%; + background-color: #0d6efd; + color: white; + border: none; */ + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); + /* font-size: 24px; */ + cursor: pointer; + pointer-events: auto; +} + +.fab-option { + pointer-events: auto; + margin-bottom: 10px; +} +@media (max-width: 768px) { + .fab-container { + right: 20px; + left: 50%; + bottom: 20px; + } +} \ No newline at end of file diff --git a/src/components/common/FloatingMenu.jsx b/src/components/common/FloatingMenu.jsx new file mode 100644 index 00000000..de4ee268 --- /dev/null +++ b/src/components/common/FloatingMenu.jsx @@ -0,0 +1,33 @@ +import React, { useState } from "react"; +import {useFab} from "../../Context/FabContext"; +import './FloatingMenu.css' + +const FloatingMenu = () => { + const { actions } = useFab(); + const [open, setOpen] = useState(false); + if (actions.length === 0) return null; + + return ( +