In the process of developing a Nextjs app, I have created a dashboard navbar using mui components. The navbar includes an interactive notification <IconButton> that triggers a notification box built with standard HTML and CSS.
dashboard-navbar.js:
import NotificationBox from "./notification-box/notification-box";
//...
export const DashboardNavbar = (props) => {
const [down, setDown] = useState(false);
const toggleDown = () => {
setDown(!down);
};
//...
return (
<>
<NotificationBox down={down} notifications={props.notifications} />
<DashboardNavbarRoot>
<div style={{ display: "flex", gap: "25px" }}>
<div style={{ transform: "translate(0,18px)" }}>
//...
<IconButton
aria-label="more"
id="long-button"
onClick={toggleDown}
style={{ transform: "translate(20px,-15px)" }}
>
<Badge badgeContent={0} color="primary" variant="dot">
<BellIcon fontSize="small" />
</Badge>
</IconButton>
</div>
//...
</div>
</DashboardNavbarRoot>
</>
);
}
notification-box.js:
import classes from "./notification-box.module.css";
export const NotificationBox = ({ down, notifications }) => {
var box = document.getElementById("box");
if (down) {
box.style.height = "0px";
box.style.opacity = 0;
} else {
box.style.height = "510px";
box.style.opacity = 1;
}
return (
<div className={classes.notifiBox} id="box">
<h2>
Notifications <span>{notifications.length}</span>
</h2>
{notifications.map((notification, index) => (
<div key={index} className={classes.notifiItem}>
<img src={notification.img} alt="img" />
<div className={classes.text}>
<h4>{notification.title}</h4>
<p>{notification.content}</p>
</div>
</div>
))}
</div>
);
};
notification-box.module.css:
.notifiBox {
/* background-color: white; */
width: 300px;
height: 0px;
position: absolute;
top: 63px;
right: 35px;
transition: 1s opacity, 250ms height;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.notifiItem {
display: flex;
border-bottom: 1px solid #eee;
padding: 15px 5px;
margin-bottom: 15px;
cursor: pointer;
}
.notifiItem:hover {
background-color: #eee;
}
.notifiBox h2 {
font-size: 14px;
padding: 10px;
border-bottom: 1px solid #eee;
color: #999;
}
.notifiBox h2 span {
color: #f00;
}
.notifiItem img {
display: block;
width: 50px;
margin-right: 10px;
border-radius: 50%;
}
.notifiItem .text h4 {
color: #777;
font-size: 16px;
margin-top: 10px;
}
.notifiItem .text p {
color: #aaa;
font-size: 12px;
}
result:: https://i.sstatic.net/kSo2E.jpg
I experimented with adding a background-color property to the notifiBox class and setting it to white, which improved the appearance but the issue of hiding the mui textField label persistently remained unresolved: