Navbar covering the full width of screen - css

Question

I am making a dashboard for my project in which I am also including navbar in it , but when I included navbar , it is covering the whole length of the screen . I tried a lot , but I am not that much pro in css , can anyone correct this code ??
Here is my dashboard code :
import React from 'react';
import Navbar from './components/Navbar/Navbar';
import RightNavbar from './components/RightNavbar/RightNavbar';
import styles from './App.module.scss';
function App({ history }) {
return (
<div>
<Navbar/>
<RightNavbar/>
<ToastContainer />
<div className = {styles.container}>
</div>
</div>
);
}
export default App;
Here is my Navbar code :
//STYLES
import styles from "./Navbar.module.scss";
//CONTEXT
import { useContext } from "react";
import NavContext from "../../Context/NavContext";
//REACT ROUTER
import { NavLink } from "react-router-dom";
//ICONS
import {
MdOutlineDashboard,
MdOutlineAnalytics,
MdOutlinedFlag,
MdPeopleOutline,
MdOutlineMessage,
MdOutlineLogout,
} from "react-icons/md";
import { IoMdLogIn } from "react-icons/io";
import { FaReact, FaTimes } from "react-icons/fa";
import { BsThreeDots } from "react-icons/bs";
import { VscDashboard } from "react-icons/vsc";
const NavUrl = ({ url, icon, description }) => {
const { nav, setNav } = useContext(NavContext);
const checkWindowSize = () => {
if (window.innerWidth < 1024) setNav(!nav);
};
return (
<li className={styles.li_navlink}>
<NavLink
to={`${url}`}
className={({ isActive }) => (isActive ? styles.active : undefined)}
onClick={() => checkWindowSize()}
>
{icon}
<span className={styles.description}>{description}</span>
</NavLink>
</li>
);
};
const Navbar = () => {
const { nav, setNav } = useContext(NavContext);
return (
<div
className={`${styles.navbar_container} ${
nav ? styles.navbar_mobile_active : undefined
}`}
>
<nav className={nav ? undefined : styles.nav_small}>
{/* LOGO */}
<div className={styles.logo}>
<VscDashboard className={styles.logo_icon} />
<FaTimes
className={styles.mobile_cancel_icon}
onClick={() => {
setNav(!nav);
}}
/>
</div>
{/* MENU */}
<ul className={styles.menu_container}>
{/* FIRST CATEGORY */}
<span className={styles.categories}>
{nav ? "Pages" : <BsThreeDots />}
</span>
<NavUrl
url="/"
icon={<MdOutlineDashboard />}
description="Dashboard"
/>
<NavUrl
url="analytics"
icon={<MdOutlineAnalytics />}
description="Analytics"
/>
<NavUrl
url="campaings"
icon={<MdOutlinedFlag />}
description="Campaings"
/>
<NavUrl url="team" icon={<MdPeopleOutline />} description="Team" />
<NavUrl
url="messages"
icon={<MdOutlineMessage />}
description="Messages"
/>
</ul>
{/* LOGOUT BUTTON */}
<div
className={`${styles.btn_logout}`}
onClick={() => {
setNav(!nav);
}}
>
<MdOutlineLogout />
</div>
</nav>
<div
className={nav ? styles.mobile_nav_background_active : undefined}
onClick={() => {
setNav(!nav);
}}
></div>
</div>
);
};
export default Navbar;
And here is my Navbar.module.scss :
.navbar_container {
--color_nav_bg: rgb(30, 41, 59);
--color_nav_txt: rgb(100, 116, 139);
--color_nav_ctg: rgb(226, 232, 240);
--color_nav_active: rgb(85, 79, 232);
--color_nav_not_active: rgb(61, 74, 94);
--color_nav_active_bg: rgb(15, 23, 42);
--nav_width: 16rem;
background: var(--color_nav_bg);
height: 100vh;
padding: var(--padding-md) var(--padding-sm);
transition: transform 300ms ease-in-out;
#media screen and (max-width: 1024px) {
transform: translateX(-100%);
position: absolute;
top: 0;
left: 0;
z-index: 12;
}
#media screen and (max-width: 18rem) {
width: 100vw;
}
}
.navbar_mobile_active {
#media screen and (max-width: 1024px) {
transform: translateX(0);
}
}
nav {
position: relative;
width: var(--nav_width);
height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
transition: width linear 0.3s;
&::-webkit-scrollbar {
display: none;
}
}
.logo {
padding: 0 0.35rem;
font-size: 2.2rem;
display: flex;
.logo_icon {
color: var(--color_nav_active);
}
.mobile_cancel_icon {
display: none;
}
#media screen and (max-width: 1024px) {
.logo_icon {
display: none;
}
.mobile_cancel_icon {
display: block;
cursor: pointer;
font-size: 2.2rem;
padding: 0.2rem;
color: var(--color_nav_active);
}
}
}
.menu_container {
margin-top: var(--margin-lg);
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.categories {
color: var(--color_nav_txt);
text-transform: uppercase;
font-size: 0.8rem;
margin-bottom: var(--margin-xxs);
svg {
font-size: 1rem;
}
}
.second_category {
margin-top: 3rem;
}
.li_navlink a {
display: flex;
align-items: center;
flex: 1;
padding: 0.5rem 0.75rem;
text-decoration: none;
color: var(--color_nav_ctg);
transition: all ease-in-out 0.2s;
.description {
margin-left: 0.5rem;
font-weight: 400;
transition: opacity 200ms ease;
}
svg {
font-size: 1.5rem;
color: var(--color_nav_not_active);
flex-shrink: 0;
}
&:hover {
background: var(--color_nav_active_bg);
}
&:hover svg {
color: var(--color_nav_active);
}
}
.li_navlink .active {
background: var(--color_nav_active_bg);
svg {
color: var(--color_nav_active);
}
}
.btn_logout {
margin-top: auto;
display: flex;
justify-content: flex-end;
transition: all ease-in-out 200ms;
padding: 0.5rem 0.75rem 0 0.75rem;
svg {
font-size: 1.5rem;
color: var(--color_nav_active);
cursor: pointer;
transform: scaleX(-1);
}
}
.mobile_nav_background_active {
width: 0;
height: 100vh;
transition: all ease-out 500ms;
transition-delay: 300ms;
cursor: pointer;
#media screen and (max-width: 1024px) {
display: block;
position: absolute;
top: 0;
left: calc(var(--nav_width) + var(--padding-md));
width: calc(100vw - var(--nav_width) - var(--padding-md));
background: rgba(0, 0, 0, 0.185);
z-index: -1;
}
}
//NAVIGATION SMALL
.nav_small {
width: 3rem;
.categories {
padding: 0 1rem;
}
.description {
opacity: 0;
}
.btn_logout {
svg {
transform: scaleX(1);
}
}
}