<div style="max-width: 390px;">
<div
	class="d-flex justify-content-between align-items-center d-md-none py-4">
	<!-- heading -->
	<h3 class="fs-5 mb-0">Account Setting</h3>
	<!-- button -->
	<button
		class="btn btn-outline-gray-400 text-muted d-md-none btn-icon btn-sm ms-3"
		type="button" data-bs-toggle="offcanvas"
		data-bs-target="#offcanvasAccount"
		aria-controls="offcanvasAccount">
		<i class="bi bi-text-indent-left fs-3"></i>
	</button>
</div>
<div class="pt-10 pe-xl-10">
	<!-- nav -->
	<ul class="nav flex-column nav-pills nav-pills-dark">
		<!-- nav item -->
		<li class="nav-item">
			<a class="nav-link active" aria-current="page"
				href="../../pages/account-orders.html">
				<i
					class="feather-icon icon-shopping-bag me-2"></i>
				Your Orders
			</a>
		</li>
		<!-- nav item -->
		<li class="nav-item">
			<a class="nav-link"
				href="../../pages/account-settings.html">
				<i class="feather-icon icon-settings me-2"></i>
				Settings
			</a>
		</li>
		<!-- nav item -->
		<li class="nav-item">
			<a class="nav-link"
				href="../../pages/account-address.html">
				<i class="feather-icon icon-map-pin me-2"></i>
				Address
			</a>
		</li>
		<!-- nav item -->
		<li class="nav-item">
			<a class="nav-link"
				href="../../pages/account-payment-method.html">
				<i
					class="feather-icon icon-credit-card me-2"></i>
				Payment Method
			</a>
		</li>
		<!-- nav item -->
		<li class="nav-item">
			<a class="nav-link"
				href="../../pages/account-notification.html">
				<i class="feather-icon icon-bell me-2"></i>
				Notification
			</a>
		</li>
		<!-- nav item -->
		<li class="nav-item">
			<hr />
		</li>
		<!-- nav item -->
		<li class="nav-item">
			<a class="nav-link" href="../../index.html">
				<i class="feather-icon icon-log-out me-2"></i>
				Log out
			</a>
		</li>
	</ul>
</div>
</div>

<div class="row">
  <div class="col-12 col-lg-3 col-md-4 mb-4 mb-md-0">
     <div class="d-flex flex-column">
        <div>
           <!-- img -->
           <!-- img -->
           <img src="../../assets/images/stores-logo/stores-logo-1.svg" alt="" class="rounded-circle icon-shape icon-xxl">
        </div>
        <!-- heading -->
        <div class="mt-4">
           <h1 class="mb-1 h4">E-Grocery Super Market</h1>
           <div class="small text-muted">
              <span>Everyday store prices </span>
           </div>
           <div>
              <span><small><a href="#!">100% satisfaction guarantee</a></small></span>
           </div>
           <!-- rating -->
           <div class="mt-2">
              <!-- rating -->
              <small class="text-warning">
              <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-half"></i></small><span class="ms-2">5.0</span>
              <!-- text --><span class="text-muted ms-1">(3,400 reviews)</span>
           </div>
        </div>
     </div>
     <hr>
     <!-- nav -->
     <ul class="nav flex-column nav-pills nav-pills-dark">
        <!-- nav item -->
        <li class="nav-item">
           <a class="nav-link active" aria-current="page" href="#"><i class="feather-icon icon-shopping-bag me-2"></i>Shop</a>
        </li>
        <!-- nav item -->
        <li class="nav-item">
           <a class="nav-link" href="#"><i class="feather-icon icon-gift me-2"></i>Deals</a>
        </li>
        <!-- nav item -->
        <li class="nav-item">
           <a class="nav-link" href="#"><i class="feather-icon icon-map-pin me-2"></i>Buy It Again</a>
        </li>
        <!-- nav item -->
        <li class="nav-item">
           <a class="nav-link" href="#"><i class="feather-icon icon-star me-2"></i>Reviews</a>
        </li>
        <!-- nav item -->
        <li class="nav-item">
           <a class="nav-link" href="#"><i class="feather-icon icon-book me-2"></i>Recipes</a>
        </li>
        <!-- nav item -->
        <li class="nav-item">
           <a class="nav-link" href="#"><i class="feather-icon icon-phone-call me-2"></i>Contact</a>
        </li>
        <!-- nav item -->
        <li class="nav-item">
           <a class="nav-link" href="#"><i class="feather-icon icon-clipboard me-2"></i>Policy</a>
        </li>
     </ul>
     <hr>
     <div>
        <ul class="nav flex-column nav-links">
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Produce</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Dairy &amp; Eggs</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Beverages</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Meat &amp; Seafood</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Snacks &amp; Candy</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Frozen</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Bakery</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Prepared Foods</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Alcohol</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Dry Goods &amp; Pasta</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Condiments &amp; Sauces</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Canned Goods &amp; Soups</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Breakfast</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Household</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Baking Essentials</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Oils, Vinegars, &amp; Spices</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Health Care</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Personal Care</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Kitchen Supplies</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Floral</a>
           </li>
           <!-- nav item -->
           <li class="nav-item">
              <a href="#!" class="nav-link">Party &amp; Gift Supplies</a>
           </li>
        </ul>
     </div>
 </div>
</div>