Skip to content

Instantly share code, notes, and snippets.

@paulwababu

paulwababu/abc.html

Created January 5, 2024 15:55
Show Gist options
  • Save paulwababu/b83770fb85d27fd640206e780476166b to your computer and use it in GitHub Desktop.
Save paulwababu/b83770fb85d27fd640206e780476166b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
abc.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
body {
font-family: 'Montserrat', sans-serif;
}
.sidebar {
background-color: #071622; /* Dark blue-grey color */
color: white;
min-height: 100vh; /* Full height */
min-width: 250px; /* Sidebar width */
padding: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.menu-label {
padding-left: 1rem;
padding-top: 30px;
padding-bottom: 2px;
color: #9E9E9E; /* Light grey color for the 'Menu' label */
font-size: 0.8rem;
text-transform: uppercase;
}
.menu-labell {
color: #9E9E9E; /* Light grey color for the 'Menu' label */
font-size: 0.8rem;
text-transform: uppercase;
}
.sidebar .nav-link {
color: #B0BEC5; /* Grey text for all nav items */
font-size: 0.85rem; /* Smaller text size */
font-weight: 500;
}
.sidebar .nav-link.active {
color: #4CAF50; /* Green text for the active item */
background-color: rgba(126, 135, 155, 0.13);; /* Lighter shade for active items */
border-left: 3px solid #4CAF50; /* Green left border */
}
.sidebar .nav-link:hover {
background-color: #37474F;
}
.sidebar .nav-item {
margin-bottom: 5px; /* Space between items */
}
.sidebar .nav-item:last-child {
margin-top: auto; /* Push logout to the bottom */
}
.sidebar-icon {
width: 20px; /* Icon size */
margin-right: 10px; /* Space between icon and text */
}
.sidebar .nav-link span {
font-size: 0.85rem; /* Adjust if necessary to fit all items */
}
.app-link {
margin-top: auto;
padding: 0.5rem;
text-align: center;
}
.google-play-btn {
background-image: linear-gradient(to right, #85C340, #0071BA);
border-radius: 20px; /* Rounded corners */
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.75rem; /* Vertical and horizontal padding */
text-decoration: none;
}
.google-play-btn img {
height: 24px; /* Icon height */
margin-right: 0.5rem; /* Space between icon and text */
}
.google-play-btn span {
color: white; /* White text color */
font-size: 0.7rem; /* Smaller text size */
font-weight: 400;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="d-flex">
<div class="sidebar d-flex flex-column flex-shrink-0 p-3">
<a href="/" class="d-block mb-3 mb-md-0 links text-decoration-none">
<!-- Logo here -->
<div class="text-center">
<img src="https://irri-hub.com/wp-content/uploads/2022/04/irrihub.png" width="150px" alt="Logo" />
</div>
</a>
<span class="menu-label">Menu</span>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="/" class="nav-link active d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img src="https://res.cloudinary.com/prometheusapi/image/upload/v1704397145/Home_bv00ja.png" class="sidebar-icon" alt="Home">
<span style="color: #85C340;">Home</span>
</a>
</li>
<!-- Add other items here -->
<li class="nav-item">
<a href="/dashboard" class="nav-link d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img src="https://res.cloudinary.com/prometheusapi/image/upload/v1704456253/Garden_Sprinkler_mds5ds.png" class="sidebar-icon" alt="Home">
<span style="color: #7E879B;">Products</span>
</a>
</li>
<li class="nav-item">
<a href="/dashboard" class="nav-link d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img src="https://res.cloudinary.com/prometheusapi/image/upload/v1704457070/4ce2863c40576c0f68a4930d4e690c00_m0fqi7.png" class="sidebar-icon" alt="Home">
<span style="color: #7E879B;">Agrodealers</span>
</a>
</li>
<!--insights-->
<li class="nav-item">
<a href="/dashboard" class="nav-link d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img src="https://res.cloudinary.com/prometheusapi/image/upload/v1704456253/insight_1_o4eyfl.png" class="sidebar-icon" alt="Home">
<span style="color: #7E879B;">Insights</span>
</a>
</li>
<!--orders-->
<li class="nav-item">
<a href="/dashboard" class="nav-link d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img src="https://res.cloudinary.com/prometheusapi/image/upload/v1704456253/Shopping_Cart_op8xvy.png" class="sidebar-icon" alt="Home">
<span style="color: #7E879B;">Orders</span>
</a>
</li>
</ul>
<!-- Add this below your existing menu items -->
<span class="menu-labell">Others</span>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="/settings" class="nav-link d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img src="https://res.cloudinary.com/prometheusapi/image/upload/v1704456254/Settings_bjtcja.png" height="30px" class="sidebar-icon" alt="Settings">
<span style="color: #7E879B;">Settings</span>
</a>
</li>
<li class="nav-item">
<a href="/support" class="nav-link d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img src="https://res.cloudinary.com/prometheusapi/image/upload/v1704456253/Online_Support_q8jfbh.png" height="30px" class="sidebar-icon" alt="Support">
<span style="color: #7E879B;">Support</span>
</a>
</li>
<li class="nav-item">
<a href="/logout" class="nav-link d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img src="https://res.cloudinary.com/prometheusapi/image/upload/v1704456253/Logout_a9pa07.png" height="30px" class="sidebar-icon" alt="Logout">
<span style="color: #7E879B;">Logout</span>
</a>
</li>
</ul>
<div class="app-link">
<a href="#" class="google-play-btn">
<img src="https://res.cloudinary.com/prometheusapi/image/upload/v1704396815/Google_Play_gpriaa.png" alt="Google Play" />
<span>ANDROID APP ON <br> GOOGLE PLAY</span>
</a>
</div>
</div>
<!-- Page content here -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment