I'm trying to build a responsive dashboard, using a sidebar for navigation on the right, I built the sidebar as a layout, and extended it in the dashboard page, by dividing the page into Grids using Bootstrap 4.
But the result I keep getting is as you can see in the screenshot, I'm not sure why the divs behave like this.
the source code for the Sidebar Layout
HTML
<div class="wrapper">
<input type="checkbox" id="btn" hidden />
<label for="btn" class="menu-btn">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</label>
<nav id="sidebar">
<div class="title">Side Menu</div>
<ul class="list-items">
<li>
<a href="#"><i class="fas fa-home"></i>Home</a>
</li>
<li>
<a href="#"><i class="fas fa-sliders-h"></i>Clients</a>
</li>
<li>
<a href="#"><i class="fas fa-address-book"></i>Services</a>
</li>
<li>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</li>
<li>
<a href="#"><i class="fas fa-stream"></i>Features</a>
</li>
<li>
<a href="#"><i class="fas fa-user"></i>About us</a>
</li>
<li>
<a href="#"><i class="fas fa-globe-asia"></i>Languages</a>
</li>
<li>
<a href="#"><i class="fas fa-envelope"></i>Contact us</a>
</li>
</ul>
</nav>
</div>
CSS
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.wrapper{
height: 100%;
width: 45%;
position: relative;
}
.wrapper .menu-btn{
position: absolute;
left: 20px;
top: 10px;
background: #4a4a4a;
color: #fff;
height: 45px;
width: 45px;
z-index: 9999;
border: 1px solid #333;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
#btn:checked ~ .menu-btn{
left: 247px;
}
.wrapper .menu-btn i{
position: absolute;
transform: none;
font-size: 23px;
transition: all 0.3s ease;
}
.wrapper .menu-btn i.fa-times{
opacity: 0;
}
#btn:checked ~ .menu-btn i.fa-times{
opacity: 1;
transform: rotate(-180deg);
}
#btn:checked ~ .menu-btn i.fa-bars{
opacity: 0;
transform: rotate(180deg);
}
#sidebar{
position: absolute;
background: #404040;
height: 100%;
width: 270px;
overflow: hidden;
left: -270px;
transition: all 0.3s ease;
}
#btn:checked ~ #sidebar{
left: 0;
}
#sidebar .title{
line-height: 65px;
text-align: center;
background: #333;
font-size: 25px;
font-weight: 600;
color: #f2f2f2;
border-bottom: 1px solid #222;
}
#sidebar .list-items{
position: relative;
background: #404040;
width: 100%;
height: 100%;
list-style: none;
/*text-align: justify;*/
/*line-height: 0;*/
}
#sidebar .list-items li{
padding-left: 40px;
line-height: 50px;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid #333;
transition: all 0.3s ease;
position: relative;
}
#sidebar .list-items li:hover{
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
box-shadow: 0 0 10px 3px #222;
}
#sidebar .list-items li:first-child{
border-top: none;
}
#sidebar .list-items li a{
color: #f2f2f2;
text-decoration: none;
font-size: 18px;
font-weight: 500;
/*height: 100%;*/
width: 100%;
display: block;
}
#sidebar .list-items li a i{
margin-right: 20px;
}
#sidebar .list-items .icons{
width: 100%;
height: 40px;
text-align: center;
position: absolute;
bottom: 100px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
#sidebar .list-items .icons a{
height: 100%;
width: 40px;
display: block;
margin: 0 5px;
font-size: 18px;
color: #f2f2f2;
background: #4a4a4a;
border-radius: 5px;
border: 1px solid #383838;
transition: all 0.3s ease;
}
#sidebar .list-items .icons a:hover{
background: #404040;
}
.list-items .icons a:first-child{
margin-left: 0;
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #202020;
z-index: -1;
width: 100%;
text-align: center;
}
.content .header{
font-size: 45px;
font-weight: 700;
}
.content p{
font-size: 40px;
font-weight: 700;
}
java script
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if(toggle && nav && bodypd && headerpd){
toggle.addEventListener('click', ()=>{
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle','nav-bar','body-pd','header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink(){
if(linkColor){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
For the Main Dashboard , which where's the problem occur
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>@yield('title')</title>
<link rel="stylesheet" href="{{asset('assets/css/bootstrap.min.css')}}" >
<link href="{{asset('assets/css/registerClient.css')}}" rel="stylesheet">
<link href="{{asset('assets/css/dashboard-navbar.css')}}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
{{--@yield('layouts.adminNavbar')--}}
{{--inhert the side Navabar for SLP navigation--}}
<div class="container">
<div class="row">
{{-- start of sidebar column--}}
<div class="col-md-6">
@extends('layouts.adminNavbar')
</div> {{-- end of sidebar column--}}
{{-- start of the form column--}}
<div class="col-md-6">
<div class="class container-fluid">
<form action="action_page.php">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" id="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</div>{{-- end of register form column --}}
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to split the page to 2 columns using Bootstrap Grids the left column takes the @extended layout, and the right page take form or any other page based on the route the user in
your question is not quite clear i suppose you are going for something like this:
If so this is more bootstrap/html question then it is laravel-blade. Here is code for example on pictures
HTML
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@yield('title')</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<div class="wrapper">
<input type="checkbox" id="btn" hidden />
<label for="btn" class="menu-btn">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</label>
<nav id="sidebar">
<div class="title">Side Menu</div>
<ul class="list-items">
<!-- Menu items here -->
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</ul>
</nav>
<div class="main-content">
<!-- Main content here -->
<div class="m-auto">
<h1>Main content</h1>
</div>
</div>
</div>
<style>
#sidebar {
position: fixed;
top: 0;
left: -200;
height: 100%;
width: 200px;
/* Adjust the width as needed */
background-color: #f1f1f1;
padding: 20px;
box-sizing: border-box;
transform: translateX(0);
transition: transform 0.3s ease;
}
.wrapper .menu-btn {
position: absolute;
left: 20px;
top: 10px;
background: #4a4a4a;
color: #fff;
height: 45px;
width: 45px;
z-index: 9999;
border: 1px solid #333;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
#btn:checked~#sidebar {
transform: translateX(+100%);
}
#btn:checked~.menu-btn {
left: 200px;
}
#btn:checked~.menu-btn i.fa-times {
opacity: 1;
transform: rotate(-180deg);
}
#btn:checked~.menu-btn i.fa-bars {
opacity: 0;
transform: rotate(180deg);
}
.main-content{
margin-left: 250px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
This is just one of examples how can this functionality can be achived by CSS only. If this is what you require it is always good idea, at least in my eyes, to go about it like this:
br