Skip to content

Commit

Permalink
feat: Make sidebar responsive to smaller screens
Browse files Browse the repository at this point in the history
  • Loading branch information
Carl-Tabuso committed Apr 2, 2024
1 parent 479bc76 commit 8d34322
Showing 1 changed file with 138 additions and 100 deletions.
238 changes: 138 additions & 100 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,135 +2,173 @@
<html lang="en">

<head>
<!--Site Information-->
<!--Site Meta Information-->
<meta charset="UTF-8" />
<title>Sweet Avenue POS</title>
<!--Mobile Specific Metas-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css" />
<!--Site Icon-->
<link rel="icon" href="images/sweet-avenue-logo.png" type="image/png"/>
</head>

<body class="bg-timberwolf">
<body>

<!--Header-->
<div class="navbar navbar-expand bg-rose-white shadow-sm">
<div class="container-fluid">
<div class="row align-items-center">
<!--Main Container-->
<div class="container-fluid px-0 bg-timberwolf">

<!--Header-->
<div class="navbar shadow-sm sticky-top bg-rose-white">
<div class="row align-items-center justify-content-between">
<div class="col-auto pe-0">
<a class="ps-2 navbar-brand" href="#">

<!--Logo brand-->
<a class="ps-4 navbar-brand" href="#">
<img class="m-1" src="images/sweet-avenue-logo.png" alt="Sweet Avenue Logo" width="70" height="70">
</a>
</div>
<div class="col ps-0">
<h3 class="mb-0 text-tiger-orange"><dt><strong>SWEET AVENUE</strong></dt></h3>
<h5 class="text-tiger-orange"><dt><strong>COFFEE • BAKESHOP</strong></dt></h5>

<!--Shop's name-->
<div class="col ps-0 text-tiger-orange">
<h3 class="mb-0 fw-bold"><strong>SWEET AVENUE</strong></h3>
<h5 class="fw-bold"><strong>COFFEE • BAKESHOP</strong></h5>

<!--Hamburger/Toggle icon for smaller screens-->
<div class="col-auto position-absolute top-50 end-0 translate-middle-y pe-4">
<button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent" aria-controls="sidebarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>

</div>
</div>
</div>
</div>
<!--End of Header-->


<!--Sidebar-->
<div class="d-flex flex-column">
<div class="row min-vh-100">
<div class="col-xl-1 col-lg-1 col-md-2 bg-rose-white d-flex flex-wrap flex-column mx-2 shadow-sm">
<div class="align-items-center nav-underline">

<!--Sidebar Contents-->
<!--Home-->
<div class="pt-4 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<img src="icons/house-door.svg" width="24" height="24" alt="home-icon">
<div>Home</div>
</a>
</div>
</div>

<!--Transaction-->
<div class="pt-3 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<img src="icons/cart-plus.svg" width="24" height="24" alt="transaction-icon">
<div>Transaction</div>
</a>
</div>
</div>
<!--End of Header-->

<!--Sales-->
<div class="pt-3 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<img src="icons/cash-stack.svg" width="24" height="24" alt="sales-icon">
<div>Sales</div>
</a>
</div>
</div>
<div class="container-fluid px-0">
<div class="overflow-hidden flex-column">
<div class="row overflow-y-auto" style="height: calc(100vh - 94px);">

<!--Products-->
<div class="pt-3 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<img src="icons/cup.svg" width="24" height="24" alt="products-icon">
<div>Products</div>
</a>
</div>
</div>
<!--Sidebar-->
<div id="sidebarContent" class="fw-semibold text-muted navbar nav-underline col-xl-1 col-lg-2 col-md-2 col-sm-4 d-lg-flex flex-wrap flex-column shadow-sm bg-rose-white mx-2 collapse">
<!--Home-->
<div class="pt-4 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-house-door" viewBox="0 0 16 16">
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4z"/>
</svg>
<div class="pt-1">Home</div>
</a>
</div>
</div>

<!--Transaction-->
<div class="pt-1 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cart-plus" viewBox="0 0 16 16">
<path d="M9 5.5a.5.5 0 0 0-1 0V7H6.5a.5.5 0 0 0 0 1H8v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H9z"/>
<path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1zm3.915 10L3.102 4h10.796l-1.313 7zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0m7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
</svg>
<div class="pt-1">Transact</div>
</a>
</div>
</div>

<!--Reports-->
<div class="pt-3 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<img src="icons/clipboard2-data.svg" width="24" height="24" alt="reports-icon">
<div>Reports</div>
</a>
</div>
</div>
<!--Sales-->
<div class="pt-1 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cash-stack" viewBox="0 0 16 16">
<path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/>
<path d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2z"/>
</svg>
<div class="pt-1">Sales</div>
</a>
</div>
</div>

<!--Accounts-->
<div class="pt-3 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<img src="icons/people.svg" width="24" height="24" alt="accounts-icon">
<div>Accounts</div>
</a>
</div>
</div>
</div>

<div class="mt-auto">
<!--Sign-in User-->
<div class="row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<img src="images/sweet-avenue-logo.png" width="35" height="35" alt="user-image">
<div>Admin</div>
</a>
<!--Products-->
<div class="pt-1 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cup" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M.11 3.187A.5.5 0 0 1 .5 3h13a.5.5 0 0 1 .488.608l-.22.991a3.001 3.001 0 0 1-1.3 5.854l-.132.59A2.5 2.5 0 0 1 9.896 13H4.104a2.5 2.5 0 0 1-2.44-1.958L.012 3.608a.5.5 0 0 1 .098-.42Zm12.574 6.288a2 2 0 0 0 .866-3.899zM1.124 4l1.516 6.825A1.5 1.5 0 0 0 4.104 12h5.792a1.5 1.5 0 0 0 1.464-1.175L12.877 4H1.123Z"/>
</svg>
<div class="pt-1">Products</div>
</a>
</div>
</div>

<!--Reports-->
<div class="pt-1 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-clipboard2-data" viewBox="0 0 16 16">
<path d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5z"/>
<path d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5z"/>
<path d="M10 7a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0zm-6 4a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0zm4-3a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V9a1 1 0 0 0-1-1"/>
</svg>
<div class="pt-1">Reports</div>
</a>
</div>
</div>
</div>

<!--Logout button-->
<div class="pt-3 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<img src="icons/box-arrow-in-left.svg" width="24" height="24" alt="logout-icon">
<div>Logout</div>
</a>

<!--Accounts-->
<div class="pt-1 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4q0 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>
</svg>
<div class="pt-1">Accounts</div>
</a>
</div>
</div>

<!--Last two elements-->
<div class="mt-auto mb-4">
<!--Sign-in User-->
<div class="pt-4 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<img src="images/sweet-avenue-logo.png" width="35" height="35" alt="user-image">
<div class="pt-1">Admin</div>
</a>
</div>
</div>
</div>

<!--Logout button-->
<div class="pt-3 row">
<div class="col-12 text-center">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-box-arrow-in-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10 3.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 1 1 0v2A1.5 1.5 0 0 1 9.5 14h-8A1.5 1.5 0 0 1 0 12.5v-9A1.5 1.5 0 0 1 1.5 2h8A1.5 1.5 0 0 1 11 3.5v2a.5.5 0 0 1-1 0z"/>
<path fill-rule="evenodd" d="M4.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H14.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708z"/>
</svg>
<div class="pt-1">Logout</div>
</a>
</div>
</div>
</div>
</div>
<!--End of Sidebar Contents-->

<!--End of Sidebar-->

<!--Main Content-->
<div class="col">
<!-- Content goes here -->
</div>

</div>
</div>
</div>
</div>
</div>
<!--End of Sidebar-->

<!--Bootstrap JavaScript-->
<script src="../vendor/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

0 comments on commit 8d34322

Please sign in to comment.