Popup window onClick NavBar - css

Question

I am creating a social media project using React on Rails, I have a NavBar component that handles the routing for each link, there is a link called Ventbox, which is similar to a Twitter's Tweetbox, how can I change my code so that instead of taking the user to a new page with the endpoint of '/vent', the Ventbox would just pop up wherever the user is on the Page, still with the endpoint of '/vent'?
This is my NavBar component so far:
import React from 'react'
import { NavLink } from "react-router-dom"
import { navData } from "./navData.js";
import styles from "./styles/navbar.module.css"
import { useState } from "react";
import KeyboardDoubleArrowRightIcon from '#mui/icons-material/KeyboardDoubleArrowRight';
import KeyboardDoubleArrowLeftIcon from '#mui/icons-material/KeyboardDoubleArrowLeft';
import Ventbox from './Ventbox'
import CreateIcon from '#mui/icons-material/Create';
export default function NavBar() {
const [open, setopen] = useState(false)
const toggleOpen = () => {
setopen(!open)
}
return (
<div className={open?styles.sidenav:styles.sidenavClosed}>
<button className={styles.menuBtn} onClick={toggleOpen}>
{open? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />}
</button>
{navData.map(item =>{
return <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
<NavLink key={'ventbox'} className={styles.sideitem} to="/vent">
<CreateIcon />
<Ventbox to="/vent" style={styles.linkText} />
</NavLink>
</div>
)
}
And this is my Ventbox component:
import React, { useState } from "react";
import './styles/Ventbox.css'
import {useNavigate} from 'react-router-dom'
function Ventbox({style}) {
const [popup,setPop] = useState(false);
const [content, setContent] = useState("");
const [textLimit, setTextLimit] = useState(250);
const handleClickOpen = () => {
setPop(!popup);
}
const closePopup = () => {
setPop(false);
}
const handleChange = e => {
setContent(e.target.value);
setTextLimit(250 - e.target.value.length);
}
const handleSubmit = async e => {
e.preventDefault();
if (content.length > 250) {
alert("Text limit reached");
} else {
try {
const response = await fetch(`/posts`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ content: content })
});
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
}
return(
<div>
<span onClick={handleClickOpen} className={style}>Vent</span>
<div>
{
popup?
<div className="main">
<div className="popup">
<div className="popup-header">
<h1>What's on your mind?</h1>
<button className="delete-button" onClick={closePopup}>X</button>
</div>
<div>
<form onSubmit={handleSubmit}>
<input className="textbox" placeholder="Enter text here"
value={content}
onChange={handleChange}
maxLength={250}
/>
<p>Characters remaining: {textLimit}</p>
<button className="post-button"type="submit">Post</button>
</form>
</div>
</div>
</div>:""
}
</div>
</div>
)
}
export default Ventbox;
And this is my navData component, where I got the Icons from material ui, and the routes:
import HomeIcon from '#mui/icons-material/Home';
import InfoIcon from '#mui/icons-material/Info';
import MenuBookIcon from '#mui/icons-material/MenuBook'; 
import AccountCircleIcon from '#mui/icons-material/AccountCircle';
import HowToRegIcon from '#mui/icons-material/HowToReg';
import VerifiedUserIcon from '#mui/icons-material/VerifiedUser';
import SendIcon from '#mui/icons-material/Send';
import NotificationsIcon from '#mui/icons-material/Notifications';
import CreateIcon from '#mui/icons-material/Create';
import Ventbox from './Ventbox'
import Popup from 'reactjs-popup'
import {useState} from 'react'
export const navData = [
{
id: 0,
icon: <HomeIcon/>,
text: "Home",
link: "/"
},
{
id: 1,
icon: <AccountCircleIcon/>,
text: "Profile",
link: "/profile"
},
{
id: 2,
icon: <SendIcon/>,
text: "Messages",
link: "/messages"
},
{
id: 3,
icon: <NotificationsIcon/>,
text: "Notifications",
link: "/notifications"
},
{
id: 5,
icon: <HowToRegIcon/>,
text: "Signup/Login",
link: "/signin"
},
]
Any help is greatly appreciated!!
I had tried everything, but am completely stuck :(

Answer 1

Since you are using mui, maybe you can try to wrap your component in a Modal.
https://mui.com/material-ui/react-modal/
<CreateIcon onClick={handleOpen}/>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Ventbox style={styles.linkText} />
</Modal>