<div class="row">
  <div class="col-12">
     <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>
  <div class="col-lg-3 col-md-4 col-12 border-end  d-none d-md-block">
     <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>

<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>