<div class="products-navigation">
  <div class="container">
    <div class="navigation-inner">
      <div class="shop-info">
        <img src="assets/img/vector/icons/logos/store.svg" alt="" />
        <h3>Iconic's Store</h3>
      </div>
      <div class="shop-actions">
        <a data-panel="categories-panel" class="shop-action">
          <span>Categories</span>
          <i data-feather="chevron-down"></i>
        </a>
        <a data-panel="filters-panel" class="shop-action">
          <span>Filters</span>
          <i data-feather="chevron-down"></i>
        </a>
      </div>
    </div>
  </div>
</div>

<div id="categories-panel" class="navigation-panel is-categories">
  <div class="navigation-panel-inner">
    <div class="container">
      <div class="panel-title">
        <h3>Categories</h3>
      </div>
      <div class="shop-categories">
        <!--Category-->
        <div class="category-item">
          <input type="radio" name="category_selection" checked />
          <div class="item-inner">
            <img
              class="light-image"
              src="assets/img/icons/shop/all.svg"
              alt=""
            />
            <img
              class="dark-image"
              src="assets/img/icons/shop/all-dark.svg"
              alt=""
            />
            <h4>All</h4>
          </div>
        </div>
        <!--Category-->
        <div class="category-item">
          <input type="radio" name="category_selection" />
          <div class="item-inner">
            <img
              class="light-image"
              src="assets/img/icons/shop/men.svg"
              alt=""
            />
            <img
              class="dark-image"
              src="assets/img/icons/shop/men-dark.svg"
              alt=""
            />
            <h4>Men</h4>
          </div>
        </div>
        <!--Category-->
        <div class="category-item">
          <input type="radio" name="category_selection" />
          <div class="item-inner">
            <img
              class="light-image"
              src="assets/img/icons/shop/skirt.svg"
              alt=""
            />
            <img
              class="dark-image"
              src="assets/img/icons/shop/skirt-dark.svg"
              alt=""
            />
            <h4>Women</h4>
          </div>
        </div>
        <!--Category-->
        <div class="category-item">
          <input type="radio" name="category_selection" />
          <div class="item-inner">
            <img
              class="light-image"
              src="assets/img/icons/shop/hat.svg"
              alt=""
            />
            <img
              class="dark-image"
              src="assets/img/icons/shop/hat-dark.svg"
              alt=""
            />
            <h4>Hats</h4>
          </div>
        </div>
        <!--Category-->
        <div class="category-item">
          <input type="radio" name="category_selection" />
          <div class="item-inner">
            <img
              class="light-image"
              src="assets/img/icons/shop/backpack.svg"
              alt=""
            />
            <img
              class="dark-image"
              src="assets/img/icons/shop/backpack-dark.svg"
              alt=""
            />
            <h4>Bags</h4>
          </div>
        </div>
        <!--Category-->
        <div class="category-item">
          <input type="radio" name="category_selection" />
          <div class="item-inner">
            <img
              class="light-image"
              src="assets/img/icons/shop/shoes.svg"
              alt=""
            />
            <img
              class="dark-image"
              src="assets/img/icons/shop/shoes-dark.svg"
              alt=""
            />
            <h4>Shoes</h4>
          </div>
        </div>
        <!--Category-->
        <div class="category-item">
          <input type="radio" name="category_selection" />
          <div class="item-inner">
            <img
              class="light-image"
              src="assets/img/icons/shop/clock.svg"
              alt=""
            />
            <img
              class="dark-image"
              src="assets/img/icons/shop/clock-dark.svg"
              alt=""
            />
            <h4>Accessories</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="filters-panel" class="navigation-panel is-filters">
  <div class="navigation-panel-inner">
    <div class="container">
      <div class="search-filter">
        <div class="control has-icon">
          <input
            type="text"
            class="input is-fade"
            placeholder="Filter products..."
          />
          <div class="form-icon">
            <i data-feather="filter"></i>
          </div>
        </div>
      </div>
      <div class="filter-group">
        <!--Filter-->
        <div class="control is-combo">
          <div class="combo-box">
            <div class="box-inner">
              <div class="combo-item">
                <i class="mdi mdi-currency-usd"></i>
                <span class="selected-item">Price</span>
              </div>
            </div>
            <div class="box-chevron">
              <i data-feather="chevron-down"></i>
            </div>
            <div class="box-dropdown">
              <div class="dropdown-inner has-slimscroll">
                <ul>
                  <li>
                    <span class="item-icon">
                      <i class="mdi mdi-chevron-right"></i>
                    </span>
                    <span class="item-name">Free</span>
                    <span class="checkmark">
                      <i data-feather="check"></i>
                    </span>
                  </li>
                  <li>
                    <span class="item-icon">
                      <i class="mdi mdi-chevron-right"></i>
                    </span>
                    <span class="item-name">$0 - $25</span>
                    <span class="checkmark">
                      <i data-feather="check"></i>
                    </span>
                  </li>
                  <li>
                    <span class="item-icon">
                      <i class="mdi mdi-chevron-right"></i>
                    </span>
                    <span class="item-name">$26 - $100</span>
                    <span class="checkmark">
                      <i data-feather="check"></i>
                    </span>
                  </li>
                  <li>
                    <span class="item-icon">
                      <i class="mdi mdi-chevron-right"></i>
                    </span>
                    <span class="item-name">$100 +</span>
                    <span class="checkmark">
                      <i data-feather="check"></i>
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!--Filter-->
        <div class="control is-combo">
          <div class="combo-box">
            <div class="box-inner">
              <div class="combo-item">
                <i class="mdi mdi-sort"></i>
                <span class="selected-item">Sort</span>
              </div>
            </div>
            <div class="box-chevron">
              <i data-feather="chevron-down"></i>
            </div>
            <div class="box-dropdown">
              <div class="dropdown-inner has-slimscroll">
                <ul>
                  <li>
                    <span class="item-icon">
                      <i class="mdi mdi-sort-ascending"></i>
                    </span>
                    <span class="item-name">Ascending</span>
                    <span class="checkmark">
                      <i data-feather="check"></i>
                    </span>
                  </li>
                  <li>
                    <span class="item-icon">
                      <i class="mdi mdi-sort-descending"></i>
                    </span>
                    <span class="item-name">Descending</span>
                    <span class="checkmark">
                      <i data-feather="check"></i>
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!--Filter-->
        <div class="control is-combo">
          <div class="combo-box">
            <div class="box-inner">
              <div class="combo-item">
                <i class="mdi mdi-filter-outline"></i>
                <span class="selected-item">Other</span>
              </div>
            </div>
            <div class="box-chevron">
              <i data-feather="chevron-down"></i>
            </div>
            <div class="box-dropdown">
              <div class="dropdown-inner has-slimscroll">
                <ul>
                  <li>
                    <span class="item-icon">
                      <i class="mdi mdi-comment-search-outline"></i>
                    </span>
                    <span class="item-name">Popular</span>
                    <span class="checkmark">
                      <i data-feather="check"></i>
                    </span>
                  </li>
                  <li>
                    <span class="item-icon">
                      <i class="mdi mdi-creation"></i>
                    </span>
                    <span class="item-name">Best Sellers</span>
                    <span class="checkmark">
                      <i data-feather="check"></i>
                    </span>
                  </li>
                  <li>
                    <span class="item-icon">
                      <i class="mdi mdi-comment-eye-outline"></i>
                    </span>
                    <span class="item-name">On Sale</span>
                    <span class="checkmark">
                      <i data-feather="check"></i>
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
