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

Updating UseCases in NavBar for dynamic URL

Browse Source
This commit is contained in:
rockyeverlast
2024-05-14 15:48:56 +05:30
parent cddc9e3a16
commit f34798341b
7 changed files with 365 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,6 +12,7 @@ import {
PopoverCloseButton,
PopoverAnchor,
Button,
Text,
} from "@chakra-ui/react";
import { Outlet, Link, useLocation } from "react-router-dom";
import { useEffect, useState } from "react";
@@ -32,6 +33,7 @@ import marTech from "../../assets/images/Navicons/marTech.png";
import healthTech from "../../assets/images/Navicons/healthTech.png";
import security from "../../assets/images/Navicons/security.png";
import telecom from "../../assets/images/Navicons/telecom.png";
import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice";
const NavBar = () => {
const [isScrolled, setIsScrolled] = useState(false);
@@ -40,6 +42,9 @@ const NavBar = () => {
const [isHoveredCases, setIsHoveredCases] = useState(false);
const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const { data } = useGetUseCaseQuery();
console.log(data);
const useCase = data?.data?.rows;
const location = useLocation();
const linkStyle = {
@@ -509,135 +514,29 @@ const NavBar = () => {
justifyContent={"space-between"}
>
<PopoverBody width={"45%"}>
<Link
to="/fin-tech"
className="link"
style={
location.pathname === "/fin-tech"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
{useCase?.map((slug) => (
<Link
key={slug.id}
to={`UseCases/${slug.title_slug}`}
className="link"
style={
location.pathname ===
`UseCases/${slug.title_slug}`
? highlight
: normal
}
>
<Image src={fintechIcon} width={`${iconwidth}`} />
FinTech
</Box>
</Link>
</PopoverBody>
<PopoverBody width={"45%"}>
<Link
to="/ad-tech"
className="link"
style={
location.pathname === "/ad-tech"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={adTech} width={`${iconwidth}`} />
AdTech
</Box>
</Link>
</PopoverBody>
<PopoverBody width={"45%"}>
<Link
to="/mar-tech"
className="link"
style={
location.pathname === "/mar-tech"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={marTech} width={`${iconwidth}`} />
MarTech
</Box>
</Link>
</PopoverBody>
<PopoverBody width={"45%"}>
<Link
to="/health-tech"
className="link"
style={
location.pathname === "/health-tech"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={healthTech} width={`${iconwidth}`} />
HealthTech
</Box>
</Link>
</PopoverBody>
<PopoverBody width={"45%"}>
<Link
to="/identity-security"
className="link"
style={
location.pathname === "/identity-security"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={security} width={`${iconwidth}`} />
Identity and Security
</Box>
</Link>
</PopoverBody>
<PopoverBody width={"45%"}>
<Link
to="/Telecom"
className="link"
style={
location.pathname === "/Telecom"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={telecom} width={`${iconwidth}`} />
Telecom
</Box>
</Link>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={fintechIcon} width={`${iconwidth}`} />
<Text>{`${slug.title}`}</Text>
</Box>
</Link>
))}
</PopoverBody>
</Box>
</PopoverContent>
@@ -779,13 +678,11 @@ const NavBar = () => {
<PopoverBody>
<Link
to="/"
to="/events"
className="link"
// style={
// location.pathname === "/LearnPage"
// ? highlight
// : normal
// }
style={
location.pathname === "/events" ? highlight : normal
}
>
<Box
display={"flex"}
@@ -794,7 +691,7 @@ const NavBar = () => {
marginBottom={"1rem"}
>
<Image src={subnetsIcon} width={`${iconwidth}`} />
HealthTech
Events
</Box>
</Link>
</PopoverBody>