<template>
  <layout-header></layout-header>
  <layout-sidebar></layout-sidebar>
  <!-- ========================
			Start Page Content
		========================= -->

  <div class="page-wrapper">
    <!-- Start Content -->
    <div class="content pb-0">
      <!-- Page Header -->
      <div class="mb-4">
        <h4 class="mb-1">Scrollbar</h4>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb mb-0 p-0">
            <li class="breadcrumb-item">
              <router-link to="/dashboard/">Home</router-link>
            </li>
            <li class="breadcrumb-item">
              <a href="javascript:void(0);">Advanced UI</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
              Scrollbar
            </li>
          </ol>
        </nav>
      </div>
      <!-- End Page Header -->

      <!-- start row -->
      <div class="row">
        <div class="col-xl-6">
          <div class="card">
            <div class="card-header border-bottom d-flex align-items-center">
              <h4 class="header-title">Default Scroll</h4>
            </div>
            <p class="text-muted m-3">
              Just use data attribute <code>data-simplebar</code> and add
              <code>max-height: **px</code> or fix height
            </p>
            <div class="card-body py-0 mb-3">
              <SimpleBar style="max-height: 300px">
                <div>
                  SimpleBar does only one thing: replace the browser's default
                  scrollbar with a custom CSS-styled one without losing
                  performances. Unlike some popular plugins, SimpleBar doesn't
                  mimic scroll with Javascript, causing janks and strange
                  scrolling behaviours... You keep the awesomeness of native
                  scrolling...with a custom scrollbar!
                  <p>
                    SimpleBar
                    <strong>does NOT implement a custom scroll behaviour</strong
                    >. It keeps the <strong>native</strong>
                    <code>overflow: auto</code> scroll and
                    <strong>only</strong> replace the scrollbar visual
                    appearance.
                  </p>
                  <h5>Design it as you want</h5>
                  <p>
                    SimpleBar uses pure CSS to style the scrollbar. You can
                    easily customize it as you want! Or even have multiple style
                    on the same page...or just keep the default style ("Mac OS"
                    scrollbar style).
                  </p>
                  <h5>Lightweight and performant</h5>
                  <p>
                    Only 6kb minified. SimpleBar doesn't use Javascript to
                    handle scrolling. You keep the performances/behaviours of
                    the native scroll.
                  </p>
                  <h5>Supported everywhere</h5>
                  <p class="mb-0">
                    SimpleBar has been tested on the following browsers: Chrome,
                    Firefox, Safari, Edge, IE11.
                  </p>
                </div>
              </SimpleBar>
            </div>
          </div>
        </div>

        <div class="col-xl-6">
          <div class="card">
            <div class="card-header border-bottom d-flex align-items-center">
              <h4 class="header-title">RTL Position</h4>
            </div>
            <div class="card-body pb-0">
              <p class="text-muted">
                Use <code>data-simplebar data-simplebar-direction='rtl'</code>
              </p>
            </div>
            <div class="card-body py-0 mb-3">
              <!-- ✅ RTL direction via data attribute -->
              <SimpleBar
                style="max-height: 300px"
                data-simplebar-direction="rtl"
              >
                SimpleBar does only one thing: replace the browser's default
                scrollbar with a custom CSS-styled one without losing
                performances. Unlike some popular plugins, SimpleBar doesn't
                mimic scroll with Javascript, causing janks and strange
                scrolling behaviours... You keep the awesomeness of native
                scrolling...with a custom scrollbar!
                <p>
                  SimpleBar
                  <strong>does NOT implement a custom scroll behaviour</strong>.
                  It keeps the <strong>native</strong>
                  <code>overflow: auto</code> scroll and
                  <strong>only</strong> replace the scrollbar visual appearance.
                </p>
                <h5>Design it as you want</h5>
                <p>
                  SimpleBar uses pure CSS to style the scrollbar. You can easily
                  customize it as you want! Or even have multiple style on the
                  same page...or just keep the default style ("Mac OS" scrollbar
                  style).
                </p>
                <h5>Lightweight and performant</h5>
                <p>
                  Only 6kb minified. SimpleBar doesn't use Javascript to handle
                  scrolling. You keep the performances/behaviours of the native
                  scroll.
                </p>
                <h5>Supported everywhere</h5>
                <p class="mb-0">
                  SimpleBar has been tested on the following browsers: Chrome,
                  Firefox, Safari, Edge, IE11.
                </p>
              </SimpleBar>
            </div>
          </div>
        </div>
      </div>
      <!-- end row -->

      <!-- start row -->
      <div class="row">
        <div class="col-xl-6">
          <div class="card">
            <div class="card-header border-bottom d-flex align-items-center">
              <h4 class="header-title">Scroll Size</h4>
            </div>
            <div class="card-body pb-0">
              <p class="text-muted">Custom scrollbar size using CSS override</p>
            </div>
            <div class="card-body py-0 mb-3">
              <!-- ✅ Custom scrollbar thickness via class -->
              <SimpleBar style="max-height: 300px" class="scroll-thick">
                SimpleBar does only one thing: replace the browser's default
                scrollbar with a custom CSS-styled one without losing
                performances. Unlike some popular plugins, SimpleBar doesn't
                mimic scroll with Javascript, causing janks and strange
                scrolling behaviours... You keep the awesomeness of native
                scrolling...with a custom scrollbar!
                <p>
                  SimpleBar
                  <strong>does NOT implement a custom scroll behaviour</strong>.
                  It keeps the <strong>native</strong>
                  <code>overflow: auto</code> scroll and
                  <strong>only</strong> replace the scrollbar visual appearance.
                </p>
                <h5>Design it as you want</h5>
                <p>
                  SimpleBar uses pure CSS to style the scrollbar. You can easily
                  customize it as you want! Or even have multiple style on the
                  same page...or just keep the default style ("Mac OS" scrollbar
                  style).
                </p>
                <h5>Lightweight and performant</h5>
                <p>
                  Only 6kb minified. SimpleBar doesn't use Javascript to handle
                  scrolling. You keep the performances/behaviours of the native
                  scroll.
                </p>
                <h5>Supported everywhere</h5>
                <p class="mb-0">
                  SimpleBar has been tested on the following browsers: Chrome,
                  Firefox, Safari, Edge, IE11.
                </p>
              </SimpleBar>
            </div>
          </div>
        </div>

        <div class="col-xl-6">
          <div class="card">
            <div class="card-header border-bottom d-flex align-items-center">
              <h4 class="header-title">Scroll Color</h4>
            </div>
            <div class="card-body pb-0">
              <p class="text-muted">
                Custom scrollbar color using CSS override
              </p>
            </div>
            <div class="card-body py-0 mb-3">
              <!-- ✅ Custom color via class -->
              <SimpleBar style="max-height: 300px" class="scroll-primary">
                SimpleBar does only one thing: replace the browser's default
                scrollbar with a custom CSS-styled one without losing
                performances. Unlike some popular plugins, SimpleBar doesn't
                mimic scroll with Javascript, causing janks and strange
                scrolling behaviours... You keep the awesomeness of native
                scrolling...with a custom scrollbar!
                <p>
                  SimpleBar
                  <strong>does NOT implement a custom scroll behaviour</strong>.
                  It keeps the <strong>native</strong>
                  <code>overflow: auto</code> scroll and
                  <strong>only</strong> replace the scrollbar visual appearance.
                </p>
                <h5>Design it as you want</h5>
                <p>
                  SimpleBar uses pure CSS to style the scrollbar. You can easily
                  customize it as you want! Or even have multiple style on the
                  same page...or just keep the default style ("Mac OS" scrollbar
                  style).
                </p>
                <h5>Lightweight and performant</h5>
                <p>
                  Only 6kb minified. SimpleBar doesn't use Javascript to handle
                  scrolling. You keep the performances/behaviours of the native
                  scroll.
                </p>
                <h5>Supported everywhere</h5>
                <p class="mb-0">
                  SimpleBar has been tested on the following browsers: Chrome,
                  Firefox, Safari, Edge, IE11.
                </p>
              </SimpleBar>
            </div>
          </div>
        </div>
      </div>
      <!-- end row -->
    </div>
    <!-- End Content -->

    <layouts-footer></layouts-footer>
  </div>

  <!-- ========================
End Page Content
========================= -->
</template>
<script>
import SimpleBar from "simplebar-vue";
import "simplebar-vue/dist/simplebar.min.css";

export default {
  components: { SimpleBar },
  data() {
    return {
      title: "Home",
      text: "Scrollbar",
    };
  },
};
</script>

<style>
/* Scroll Size - thicker scrollbar */
.scroll-thick .simplebar-scrollbar::before {
  width: 8px;
}

/* Scroll Color - primary colored scrollbar */
.scroll-primary .simplebar-scrollbar::before {
  background-color: #0d6efd; /* change to your brand color */
}
</style>