Here is the JSX code that resembles HTML but uses ClassName instead of class:
<div className="snavbarcontainer">
<div className="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><a href="#"><img src={ILookupPupils} alt="Pupil Lookup" /></a></li>
<li><a href="#"><img src={IMUsers} alt="Manage Users" /></a></li>
<li><a href="#"><img src={IHand} alt="Coming Soon" /></a></li>
<li><a href="#"><img src={IMAdmins} alt="Manage Admins" /></a></li>
<li><a href="#"><img src={IDash} alt="Dashboard" /></a></li>
<li><a href="#"><img src={IDB} alt="Dashboard" /></a></li>
</ul>
</div>
</div>
This is my (S)CSS styling:
body {
//! background-color: red; - DEBUGGING ONLY!
margin: 0
}
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
li /* Adds property to EACH LI, not the UL itself. */{
margin: 1em 0;
}
}
.icons_ul {
justify-content: center;
}
.toplefticon {
justify-content: flex-start;
}
Essentially, I am trying to place the image with the class "test" at the top of the vertical sidebar and have the icons centered. However, my current implementation is not working as expected.
Thank you for your help!