<>
  {"{"}% set title = 'Vertical Navbar' %{"}"}
  {"{"}% set filename = 'layout-vertical-navbar.html' %{"}"}
  {"{"}% extends 'src/layouts/vertical-navbar.html' %{"}"}
  {"{"}% block content %{"}"}
  <div className="page-heading">
    <div className="page-title">
      <div className="row">
        <div className="col-12 col-md-6 order-md-1 order-last">
          <h3>Vertical Layout with Navbar</h3>
          <p className="text-subtitle text-muted">
            Navbar will appear on the top of the page.
          </p>
        </div>
        <div className="col-12 col-md-6 order-md-2 order-first">
          <nav
            aria-label="breadcrumb"
            className="breadcrumb-header float-start float-lg-end"
          >
            <ol className="breadcrumb">
              <li className="breadcrumb-item">
                <a href="index.html">Dashboard</a>
              </li>
              <li className="breadcrumb-item active" aria-current="page">
                Layout Vertical Navbar
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
    <section className="section">
      <div className="card">
        <div className="card-header">
          <h4 className="card-title">About Vertical Navbar</h4>
        </div>
        <div className="card-body">
          <p>
            Vertical Navbar is a layout option that you can use with Mazer.{" "}
          </p>
          <p>
            In case you want the navbar to be sticky on top while scrolling, add{" "}
            <code>.navbar-fixed</code> class alongside with{" "}
            <code>.layout-navbar</code> class.
          </p>
        </div>
      </div>
      <div className="card">
        <div className="card-header">
          <h4 className="card-title">Dummy Text</h4>
        </div>
        <div className="card-body">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis
            tincidunt tempus. Duis vitae facilisis enim, at rutrum lacus. Nam at
            nisl ut ex egestas placerat sodales id quam. Aenean sit amet nibh
            quis lacus pellentesque venenatis vitae at justo. Orci varius
            natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Suspendisse venenatis tincidunt odio ut rutrum.
            Maecenas ut urna venenatis, dapibus tortor sed, ultrices justo.
            Phasellus scelerisque, nibh quis gravida venenatis, nibh mi lacinia
            est, et porta purus nisi eget nibh. Fusce pretium vestibulum
            sagittis. Donec sodales velit cursus convallis sollicitudin. Nunc
            vel scelerisque elit, eget facilisis tellus. Donec id molestie
            ipsum. Nunc tincidunt tellus sed felis vulputate euismod.
          </p>
          <p>
            Proin accumsan nec arcu sit amet volutpat. Proin non risus luctus,
            tempus quam quis, volutpat orci. Phasellus commodo arcu dui, ut
            convallis quam sodales maximus. Aenean sollicitudin massa a quam
            fermentum, et efficitur metus convallis. Curabitur nec laoreet
            ipsum, eu congue sem. Nunc pellentesque quis erat at gravida.
            Vestibulum dapibus efficitur felis, vel luctus libero congue eget.
            Donec mollis pellentesque arcu, eu commodo nunc porta sit amet. In
            commodo augue id mauris tempor, sed dignissim nulla facilisis. Ut
            non mattis justo, ut placerat justo. Vestibulum scelerisque cursus
            facilisis. Suspendisse velit justo, scelerisque ac ultrices eu,
            consectetur ac odio.
          </p>
          <p>
            In pharetra quam vel lobortis fermentum. Nulla vel risus ut sapien
            porttitor volutpat eu ac lorem. Vestibulum porta elit magna, ut
            ultrices sem fermentum ut. Vestibulum blandit eros ut imperdiet
            porttitor. Pellentesque tempus nunc sed augue auctor eleifend. Sed
            nisi sem, lobortis eget faucibus placerat, hendrerit vitae elit.
            Vestibulum elit orci, pretium vel libero at, imperdiet congue
            lectus. Praesent rutrum id turpis non aliquam. Cras dignissim, metus
            vitae aliquam faucibus, elit augue dignissim nulla, bibendum
            consectetur leo libero a tortor. Vestibulum non tincidunt nibh. Ut
            imperdiet elit vel vehicula ultricies. Nulla maximus justo sit amet
            fringilla laoreet. Aliquam malesuada diam in augue mattis aliquam.
            Pellentesque id eros dignissim, dapibus sem ac, molestie dolor.
            Mauris purus lacus, tempor sit amet vestibulum vitae, ultrices eu
            urna.
          </p>
        </div>
      </div>
    </section>
  </div>
  {"{"}% endblock %{"}"}
</>
