I'm facing an issue with integrating a .jsx file into my website. I tried testing it on a single-page demo site, but nothing is showing up. Can someone guide me through the steps to successfully integrate it onto my site? I've also attached the .CSS file for reference. The goal is to create a floating widget, but I'm struggling to implement it effectively. Any suggestions?
import React from "react";
import "./index.css";
export default function FloatingIcons() {
function handleActiveClass() {
document.getElementById("circularMenu").classList.toggle("active");
}
return (
<div id="circularMenu" className="circular-menu">
<a className="floating-btn" onClick={handleActiveClass}>
<i class="fa fa-question" style={{ fontSize: "30px" }} />
</a>
<menu className="items-wrapper">
<a href="/" className="menu-item">
<i className="fa fa-comments" />
</a>
<a href="/" className="menu-item">
<i className="fa fa-bug" />
</a>
<a href="/" className="menu-item">
<i className="fa fa-search" />
</a>
</menu>
</div>
);
}
The CSS File:
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css";
.circular-menu {
position: fixed;
bottom: 1em;
right: 1em;
}
.circular-menu .floating-btn {
display: block;
width: 3.5em;
height: 3.5em;
border-radius: 50%;
background-color: hsl(4, 98%, 60%);
box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, 0.26);
color: #fff;
text-align: center;
line-height: 4.1;
cursor: pointer;
outline: 0;
}
.circular-menu .floating-btn i {
font-size: 1.3em;
transition: transform 0.2s;
}
.circular-menu:after {
display: block;
content: " ";
width: 3.5em;
height: 3.5em;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
z-index: -2;
background-color: transparent;
transition: all 0.3s ease;
}
.circular-menu.active:after {
transform: scale3d(5.5, 5.5, 1);
transition-timing-function: cubic-bezier(0.68, 1.55, 0.265, 1);
}
.circular-menu .items-wrapper {
padding: 0;
margin: 0;
}
.circular-menu .menu-item {
position: absolute;
top: 0.2em;
right: 0.2em;
z-index: -1;
display: block;
text-decoration: none;
color: hsl(0, 0%, 100%);
font-size: 1em;
width: 3em;
height: 3em;
border-radius: 50%;
text-align: center;
line-height: 3;
background-color: #008cff;
transition: transform 0.3s ease, background 0.2s ease;
}
.circular-menu .menu-item:hover {
background-color: #2b80c5;
}
.circular-menu.active .menu-item {
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.circular-menu.active .menu-item:nth-child(1) {
transform: translate3d(-0.8em, -6.5em, 0);
}
.circular-menu.active .menu-item:nth-child(2) {
transform: translate3d(-4.5em, -4em, 0);
}
.circular-menu.active .menu-item:nth-child(3) {
transform: translate3d(-5.5em, 0.3em, 0);
}