For my website, I'm looking to implement a circular navbar that will surround the user avatar. Using ul and li elements, I have created various options that are necessary. Is there a way to position all the navItems around the bottom half of the avatar? The desired end result should resemble this:
https://i.sstatic.net/SdfJs.png
This is how my .jsx file looks:
const Profile = () => {
const { currentUser } = useContext(AuthContext);
return (
<div className="profile">
<ul className="navMenu">
<div className="avatarContainer">
<img
src="https://w7.pngwing.com/pngs/81/570/png-transparent-profile-logo-computer-icons-user-user-blue-heroes-logo-thumbnail.png"
alt=""
className="avatarPic"
/>
</div>
<li className="navItem">
<EmailIcon className="navIcon" />
<span className="navText">Email</span>
</li>
... (remainder of the code)
</ul>
</div>
);
};
export default Profile;
Here is my corresponding scss file:
.profile {
@include themify($themes) {
background-color: themed("bgSoft");
text-align: center;
height: 100%;
... (scss styling code)
}
}
Currently, all my navItems are positioned to the left of the avatar, and I am unsure about how to move them around it. Additionally, I would like each navItem to appear sequentially as the page loads, requiring me to add animations for each one. However, I am uncertain about how to accomplish this.