Struggling with centering the SVG icon in a sideways navbar using React.js. Despite trying various solutions and researching similar issues, I can't seem to make it work. Any insights on why this is happening? Apologies if the solution is straightforward, as I am still learning React.js.
Below is the code snippet:
import './App.css';
import NavBar from './navbar.js'
function App() {
return (
<div className="NavBar">
<NavBar />
</div>
)
}
export default App;
navbar.js
import React from 'react';
import './navbar.css';
function NavBar() {
return (
<div className="navbar">
<a href="/" className="navbar-button">Home</a>
<a href="/create-language" className="navbar-button">Languages</a>
<a href="/tutorials" className="navbar-button">Tutorials</a>
<a href="/community" className="navbar-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" className="bi bi-archive button-svg" viewBox="0 0 16 16">
<path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
</svg>
Community
</a>
<a href="/about" className="navbar-button">About</a>
<a href="/contact" className="navbar-button">Contact</a>
</div>
);
}
export default NavBar;
navbar.css
.navbar {
width: 5rem; /* Adjust the width to your preference */
height: 100%; /* Make the navbar the full height of the viewport */
position: fixed;
top: 0;
left: 0;
background-color: #F5F5F5; /* Background color of the navbar */
color: black;
padding: 10px;
display: flex;
flex-direction: column; /* Display the links vertically */
box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.08);
justify-content: space-between;
overflow-y: auto;
}
.navbar a {
text-decoration: none;
color: black;
padding: 10px;
font-size: small;
vertical-align: center;
}
.navbar a:hover {
background-color: #8a8a8a; /* Background color when hovering over links */
}
.button-svg {
display: inline-flex; /* Make the SVG an inline-block element */
align-items: center; /* Vertically center the SVG within the line height of the text */
margin-right: 5px; /* Add margin between the SVG and text */
}