Siddhesh.More/rubix
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix.git synced 2026-04-29 03:05:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed NavBar hover

Browse Source
This commit is contained in:
rockyeverlast
2024-04-11 13:41:31 +05:30
parent 2914aeaf35
commit 7b92f70775
7 changed files with 198 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/NavBar/NavBar.jsx
View File

@@ -30,6 +30,10 @@ import fintechIcon from "../../assets/images/Navicons/fintechIcon.png";
const NavBar = () => {
const [isScrolled, setIsScrolled] = useState(false);
const [isHoveredLearn, setIsHoveredLearn] = useState(false);
const [isHoveredBuild, setIsHoveredBuild] = useState(false);
const [isHoveredCases, setIsHoveredCases] = useState(false);
const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const location = useLocation();
@@ -172,7 +176,10 @@ const NavBar = () => {
},
}}
>
<Popover>
<Popover
isOpen={isHoveredLearn}
onClose={() => setIsHoveredLearn(false)}
>
<PopoverTrigger>
<Button
backgroundColor={"transparent"}
@@ -181,6 +188,11 @@ const NavBar = () => {
_hover={{
backgroundColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredLearn(true)}
onMouseLeave={() => setIsHoveredLearn(false)}
>
LEARN
<span
@@ -197,6 +209,11 @@ const NavBar = () => {
borderRadius={"10px"}
border={"none"}
padding={"1rem"}
onMouseEnter={() => setIsHoveredLearn(true)}
onMouseLeave={() => setIsHoveredLearn(false)}
_focus={{
boxShadow: "none",
}}
>
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
<PopoverBody>
@@ -289,7 +306,10 @@ const NavBar = () => {
</PopoverContent>
</Popover>
<Popover>
<Popover
isOpen={isHoveredBuild}
onClose={() => setIsHoveredBuild(false)}
>
<PopoverTrigger>
<Button
backgroundColor={"transparent"}
@@ -298,6 +318,11 @@ const NavBar = () => {
_hover={{
backgroundColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredBuild(true)}
onMouseLeave={() => setIsHoveredBuild(false)}
>
BUILD
<span
@@ -314,6 +339,11 @@ const NavBar = () => {
borderRadius={"10px"}
border={"none"}
padding={"1rem"}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredBuild(true)}
onMouseLeave={() => setIsHoveredBuild(false)}
>
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
<PopoverBody>
@@ -406,7 +436,10 @@ const NavBar = () => {
</PopoverContent>
</Popover>
<Popover>
<Popover
isOpen={isHoveredCases}
onClose={() => setIsHoveredCases(false)}
>
<PopoverTrigger>
<Button
backgroundColor={"transparent"}
@@ -415,6 +448,11 @@ const NavBar = () => {
_hover={{
backgroundColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredCases(true)}
onMouseLeave={() => setIsHoveredCases(false)}
>
USE CASES
<span
@@ -429,6 +467,11 @@ const NavBar = () => {
borderRadius={"10px"}
border={"none"}
padding={"1rem"}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredCases(true)}
onMouseLeave={() => setIsHoveredCases(false)}
>
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
<PopoverBody>
@@ -519,7 +562,10 @@ const NavBar = () => {
</PopoverContent>
</Popover>
<Popover>
<Popover
isOpen={isHoveredCommunity}
onClose={() => setIsHoveredCommunity(false)}
>
<PopoverTrigger>
<Button
backgroundColor={"transparent"}
@@ -528,6 +574,11 @@ const NavBar = () => {
_hover={{
backgroundColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredCommunity(true)}
onMouseLeave={() => setIsHoveredCommunity(false)}
>
COMMUNITY
<span
@@ -545,6 +596,11 @@ const NavBar = () => {
borderRadius={"10px"}
border={"none"}
padding={"1rem"}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredCommunity(true)}
onMouseLeave={() => setIsHoveredCommunity(false)}
>
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
<PopoverBody>