Untitled

 //---------------sidebar.module.css-------------------------

.sidebar {
     height: 100%;
     width: 350px;
     position: fixed;
     z-index: 1;
     left: 0;
     overflow-x: hidden;
     padding-top: 0px;
     transition: 0.5s;
     background-color: #2F4050;
     float: left;
     position: fixed;
     
 }


 .SidebarList {
     height: auto;
     padding: 0;
     width: 100%;
 }

 .row {
     width: 100%;
     height: 60px;
     border: 1px solid black;
     list-style-type: none;
     margin: 0%;
     display: flex;
     flex-direction: row;
     color: white;
     justify-content: center;
     align-items: center;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }

 .row:hover {
     cursor: pointer;
     background-color: #293846;
 }

 .row #active {
     background-color: #293846;
 }

 .icon {
     flex: 30%;
     display: grid;
     place-items: center;
 }

 .title {
     flex: 70%;
 }


//-----------------------Header.js------------------------------
import React from 'react';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { NavLink } from 'react-router-dom';

const Headers = () => {
  return (
    <>
      <Navbar bg="dark" variant="dark" fixed="top" style={{ zIndex: 1 }}>
        <Container>
          <NavLink to="/" className="text-light text-decoration-none">
            Login
          </NavLink>
          <Nav className="">
            <NavLink
              to="/register"
              className="text-light text-decoration-none mt-2 mb-3"
            >
              Register
            </NavLink>
            <img src="/images/image-3.jpg" style={{ width: 50 }} alt="" />
          </Nav>
        </Container>
      </Navbar>
      <div style={{ height: 80 }} />
      {/* Add a placeholder div to prevent content from overlapping with the fixed header */}
    </>
  );
};

export default Headers;