<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Page Title</title>
<link href="resources/css/navbar.css" rel="stylesheet" type="text/css"/>
<link href="resources/css/menu.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container-fluid pb-3 flex-grow-1 d-flex flex-column flex-sm-row overflow-auto">
<div class="row flex-grow-sm-1 flex-grow-0">
<aside class="col-sm-3 flex-grow-sm-1 flex-shrink-1 flex-grow-0 sticky-top pb-sm-0 pb-3">
<div class="bg-light border rounded-3 p-1 h-100 sticky-top">
<ul class="nav nav-pills flex-sm-column flex-row mb-auto justify-content-between text-truncate">
<li class="nav-item">
<a href="#" class="nav-link px-2 text-truncate">
<i class="bi bi-house fs-5"></i>
<span class="d-none d-sm-inline">Home</span>
</a>
</li>
<li>
<a href="#" class="nav-link px-2 text-truncate">
<i class="bi bi-speedometer fs-5"></i>
<span class="d-none d-sm-inline">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="nav-link px-2 text-truncate">
<i class="bi bi-card-text fs-5"></i>
<span class="d-none d-sm-inline">Orders</span>
</a>
</li>
<li>
<a href="#" class="nav-link px-2 text-truncate">
<i class="bi bi-bricks fs-5"></i>
<span class="d-none d-sm-inline">Products</span>
</a>
</li>
<li>
<a href="#" class="nav-link px-2 text-truncate">
<i class="bi bi-people fs-5"></i>
<span class="d-none d-sm-inline">Customers</span>
</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
</body>
</html>