<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* ui-offcanvas.html.twig */
class __TwigTemplate_1fefef38a182f580b175e3d2daaf440b extends Template
{
    private $source;
    private $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->blocks = [
            'title' => [$this, 'block_title'],
            'pagetitle' => [$this, 'block_pagetitle'],
            'body' => [$this, 'block_body'],
        ];
    }

    protected function doGetParent(array $context)
    {
        // line 1
        return "partials/layout-vertical.html.twig";
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-offcanvas.html.twig"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-offcanvas.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-offcanvas.html.twig", 1);
        $this->parent->display($context, array_merge($this->blocks, $blocks));
        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

    }

    // line 3
    public function block_title($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        echo "Offcanvas
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 6
    public function block_pagetitle($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        // line 7
        echo "\t";
        echo twig_include($this->env, $context, "partials/page-title.html.twig", ["sub_title" => "Base UI", "page_title" => "Offcanvas"]);
        echo "
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 10
    public function block_body($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        // line 11
        echo "\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Offcanvas</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tYou can use a link with the
\t\t\t\t\t\t<code>href</code>
\t\t\t\t\t\tattribute, or a button with the
\t\t\t\t\t\t<code>data-bs-target</code>
\t\t\t\t\t\tattribute. In both cases, the
\t\t\t\t\t\t<code>data-bs-toggle=\"offcanvas\"</code>
\t\t\t\t\t\tis required.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<a class=\"btn btn-primary\" data-bs-toggle=\"offcanvas\" href=\"#offcanvasExample\" role=\"button\" aria-controls=\"offcanvasExample\">
\t\t\t\t\t\t\tLink with href
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasExample\" aria-controls=\"offcanvasExample\">
\t\t\t\t\t\t\tButton with data-bs-target
\t\t\t\t\t\t</button>
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end d-flex flex-wrap gap-2-->

\t\t\t\t\t<div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"offcanvasExample\" aria-labelledby=\"offcanvasExampleLabel\">
\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasExampleLabel\">Offcanvas</h5>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t                                                    images, lists, etc.
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t</ul>

\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">At vero eos et accusamus et iusto odio dignissimos</li>
\t\t\t\t\t\t\t\t<li class=\"\">Et harum quidem rerum facilis</li>
\t\t\t\t\t\t\t\t<li class=\"\">Temporibus autem quibusdam et aut officiis</li>
\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Offcanvas Backdrop</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tScrolling the
\t\t\t\t\t\t<code>&lt;body&gt;</code>
\t\t\t\t\t\telement is disabled when an offcanvas and its backdrop are visible. Use the
\t\t\t\t\t\t<code>data-bs-scroll</code>
\t\t\t\t\t\tattribute to toggle
\t\t\t\t\t\t<code>&lt;body&gt;</code>
\t\t\t\t\t\tscrolling and
\t\t\t\t\t\t<code>data-bs-backdrop</code>
\t\t\t\t\t\tto toggle the backdrop.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasScrolling\" aria-controls=\"offcanvasScrolling\">Enable body scrolling</button>
\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasWithBackdrop\" aria-controls=\"offcanvasWithBackdrop\">Enable backdrop (default)</button>
\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasWithBothOptions\" aria-controls=\"offcanvasWithBothOptions\">Enable both scrolling & backdrop</button>
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end d-flex flex-wrap gap-2-->

\t\t\t\t\t<div class=\"offcanvas offcanvas-start\" data-bs-scroll=\"true\" data-bs-backdrop=\"false\" tabindex=\"-1\" id=\"offcanvasScrolling\" aria-labelledby=\"offcanvasScrollingLabel\">
\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasScrollingLabel\">Colored with scrolling</h5>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-header-->
\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t                                                    images, lists, etc.
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t</ul>

\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">At vero eos et accusamus et iusto odio dignissimos</li>
\t\t\t\t\t\t\t\t<li class=\"\">Et harum quidem rerum facilis</li>
\t\t\t\t\t\t\t\t<li class=\"\">Temporibus autem quibusdam et aut officiis</li>
\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t\t<div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"offcanvasWithBackdrop\" aria-labelledby=\"offcanvasWithBackdropLabel\">
\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasWithBackdropLabel\">Offcanvas with backdrop</h5>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t                                                    images, lists, etc.
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t</ul>

\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">At vero eos et accusamus et iusto odio dignissimos</li>
\t\t\t\t\t\t\t\t<li class=\"\">Et harum quidem rerum facilis</li>
\t\t\t\t\t\t\t\t<li class=\"\">Temporibus autem quibusdam et aut officiis</li>
\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t\t<div class=\"offcanvas offcanvas-start\" data-bs-scroll=\"true\" tabindex=\"-1\" id=\"offcanvasWithBothOptions\" aria-labelledby=\"offcanvasWithBothOptionsLabel\">
\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasWithBothOptionsLabel\">Backdroped with scrolling</h5>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t                                                    images, lists, etc.
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t</ul>

\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">At vero eos et accusamus et iusto odio dignissimos</li>
\t\t\t\t\t\t\t\t<li class=\"\">Et harum quidem rerum facilis</li>
\t\t\t\t\t\t\t\t<li class=\"\">Temporibus autem quibusdam et aut officiis</li>
\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end offcanvas-->
\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Offcanvas Placement</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tTry the right and bottom examples out below.
\t\t\t\t\t</p>

\t\t\t\t\t<ul class=\"text-muted fs-13\">
\t\t\t\t\t\t<li>
\t\t\t\t\t\t\t<code>.offcanvas-start</code>
\t\t\t\t\t\t\tplaces offcanvas on the left of the viewport (shown above)</li>
\t\t\t\t\t\t<li>
\t\t\t\t\t\t\t<code>.offcanvas-end</code>
\t\t\t\t\t\t\tplaces offcanvas on the right of the viewport</li>
\t\t\t\t\t\t<li>
\t\t\t\t\t\t\t<code>.offcanvas-top</code>
\t\t\t\t\t\t\tplaces offcanvas on the top of the viewport</li>
\t\t\t\t\t\t<li>
\t\t\t\t\t\t\t<code>.offcanvas-bottom</code>
\t\t\t\t\t\t\tplaces offcanvas on the bottom of the viewport</li>
\t\t\t\t\t</ul>

\t\t\t\t\t<div>
\t\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasTop\" aria-controls=\"offcanvasTop\">Toggle Top offcanvas</button>
\t\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">Toggle right offcanvas</button>
\t\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasBottom\" aria-controls=\"offcanvasBottom\">Toggle bottom offcanvas</button>
\t\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-lg-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasLeft\" aria-controls=\"offcanvasLeft\">Toggle Left offcanvas</button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end d-flex flex-wrap gap-2-->

\t\t\t\t\t\t<div class=\"offcanvas offcanvas-top\" tabindex=\"-1\" id=\"offcanvasTop\" aria-labelledby=\"offcanvasTopLabel\">
\t\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t\t<h5 id=\"offcanvasTopLabel\">Offcanvas Top</h5>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t\t                                                        images, lists, etc.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t\t\t<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">
\t\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t\t<h5 id=\"offcanvasRightLabel\">Offcanvas right</h5>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t\t                                                        images, lists, etc.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t\t\t<div class=\"offcanvas offcanvas-bottom\" tabindex=\"-1\" id=\"offcanvasBottom\" aria-labelledby=\"offcanvasBottomLabel\">
\t\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasBottomLabel\">Offcanvas bottom</h5>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t\t                                                        images, lists, etc.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t\t\t<div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"offcanvasLeft\" aria-labelledby=\"offcanvasLeftLabel\">
\t\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t\t<h5 id=\"offcanvasLeftLabel\">Offcanvas Left</h5>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t\t                                                        images, lists, etc.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end tab-pan-->
\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Dark Offcanvas</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars.
\t\t\t\t\t\t                                            Here we add
\t\t\t\t\t\t<code>.text-bg-dark</code>
\t\t\t\t\t\tto the
\t\t\t\t\t\t<code>.offcanvas</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>.btn-close-white</code>
\t\t\t\t\t\tto
\t\t\t\t\t\t<code>.btn-close</code>
\t\t\t\t\t\tfor proper styling with a dark offcanvas. If you have dropdowns within, consider also adding
\t\t\t\t\t\t<code>.dropdown-menu-dark</code>
\t\t\t\t\t\tto
\t\t\t\t\t\t<code>.dropdown-menu</code>.</p>

\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasDark\" aria-controls=\"offcanvasDark\">Dark offcanvas</button>

\t\t\t\t\t<div class=\"offcanvas offcanvas-start text-bg-dark\" tabindex=\"-1\" id=\"offcanvasDark\" aria-labelledby=\"offcanvasDarkLabel\">
\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t<h5 id=\"offcanvasDarkLabel\">Dark Offcanvas</h5>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t                                                    images, lists, etc.
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end offcanvas-->
\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row -->

";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    public function getTemplateName()
    {
        return "ui-offcanvas.html.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  113 => 11,  103 => 10,  90 => 7,  80 => 6,  60 => 3,  37 => 1,);
    }

    public function getSourceContext()
    {
        return new Source("{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Offcanvas
{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Offcanvas' }) }}
{% endblock %}

{% block body %}
\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Offcanvas</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tYou can use a link with the
\t\t\t\t\t\t<code>href</code>
\t\t\t\t\t\tattribute, or a button with the
\t\t\t\t\t\t<code>data-bs-target</code>
\t\t\t\t\t\tattribute. In both cases, the
\t\t\t\t\t\t<code>data-bs-toggle=\"offcanvas\"</code>
\t\t\t\t\t\tis required.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<a class=\"btn btn-primary\" data-bs-toggle=\"offcanvas\" href=\"#offcanvasExample\" role=\"button\" aria-controls=\"offcanvasExample\">
\t\t\t\t\t\t\tLink with href
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasExample\" aria-controls=\"offcanvasExample\">
\t\t\t\t\t\t\tButton with data-bs-target
\t\t\t\t\t\t</button>
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end d-flex flex-wrap gap-2-->

\t\t\t\t\t<div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"offcanvasExample\" aria-labelledby=\"offcanvasExampleLabel\">
\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasExampleLabel\">Offcanvas</h5>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t                                                    images, lists, etc.
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t</ul>

\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">At vero eos et accusamus et iusto odio dignissimos</li>
\t\t\t\t\t\t\t\t<li class=\"\">Et harum quidem rerum facilis</li>
\t\t\t\t\t\t\t\t<li class=\"\">Temporibus autem quibusdam et aut officiis</li>
\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Offcanvas Backdrop</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tScrolling the
\t\t\t\t\t\t<code>&lt;body&gt;</code>
\t\t\t\t\t\telement is disabled when an offcanvas and its backdrop are visible. Use the
\t\t\t\t\t\t<code>data-bs-scroll</code>
\t\t\t\t\t\tattribute to toggle
\t\t\t\t\t\t<code>&lt;body&gt;</code>
\t\t\t\t\t\tscrolling and
\t\t\t\t\t\t<code>data-bs-backdrop</code>
\t\t\t\t\t\tto toggle the backdrop.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasScrolling\" aria-controls=\"offcanvasScrolling\">Enable body scrolling</button>
\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasWithBackdrop\" aria-controls=\"offcanvasWithBackdrop\">Enable backdrop (default)</button>
\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasWithBothOptions\" aria-controls=\"offcanvasWithBothOptions\">Enable both scrolling & backdrop</button>
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end d-flex flex-wrap gap-2-->

\t\t\t\t\t<div class=\"offcanvas offcanvas-start\" data-bs-scroll=\"true\" data-bs-backdrop=\"false\" tabindex=\"-1\" id=\"offcanvasScrolling\" aria-labelledby=\"offcanvasScrollingLabel\">
\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasScrollingLabel\">Colored with scrolling</h5>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-header-->
\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t                                                    images, lists, etc.
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t</ul>

\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">At vero eos et accusamus et iusto odio dignissimos</li>
\t\t\t\t\t\t\t\t<li class=\"\">Et harum quidem rerum facilis</li>
\t\t\t\t\t\t\t\t<li class=\"\">Temporibus autem quibusdam et aut officiis</li>
\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t\t<div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"offcanvasWithBackdrop\" aria-labelledby=\"offcanvasWithBackdropLabel\">
\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasWithBackdropLabel\">Offcanvas with backdrop</h5>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t                                                    images, lists, etc.
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t</ul>

\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">At vero eos et accusamus et iusto odio dignissimos</li>
\t\t\t\t\t\t\t\t<li class=\"\">Et harum quidem rerum facilis</li>
\t\t\t\t\t\t\t\t<li class=\"\">Temporibus autem quibusdam et aut officiis</li>
\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t\t<div class=\"offcanvas offcanvas-start\" data-bs-scroll=\"true\" tabindex=\"-1\" id=\"offcanvasWithBothOptions\" aria-labelledby=\"offcanvasWithBothOptionsLabel\">
\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasWithBothOptionsLabel\">Backdroped with scrolling</h5>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t                                                    images, lists, etc.
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t</ul>

\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">At vero eos et accusamus et iusto odio dignissimos</li>
\t\t\t\t\t\t\t\t<li class=\"\">Et harum quidem rerum facilis</li>
\t\t\t\t\t\t\t\t<li class=\"\">Temporibus autem quibusdam et aut officiis</li>
\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end offcanvas-->
\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Offcanvas Placement</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tTry the right and bottom examples out below.
\t\t\t\t\t</p>

\t\t\t\t\t<ul class=\"text-muted fs-13\">
\t\t\t\t\t\t<li>
\t\t\t\t\t\t\t<code>.offcanvas-start</code>
\t\t\t\t\t\t\tplaces offcanvas on the left of the viewport (shown above)</li>
\t\t\t\t\t\t<li>
\t\t\t\t\t\t\t<code>.offcanvas-end</code>
\t\t\t\t\t\t\tplaces offcanvas on the right of the viewport</li>
\t\t\t\t\t\t<li>
\t\t\t\t\t\t\t<code>.offcanvas-top</code>
\t\t\t\t\t\t\tplaces offcanvas on the top of the viewport</li>
\t\t\t\t\t\t<li>
\t\t\t\t\t\t\t<code>.offcanvas-bottom</code>
\t\t\t\t\t\t\tplaces offcanvas on the bottom of the viewport</li>
\t\t\t\t\t</ul>

\t\t\t\t\t<div>
\t\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasTop\" aria-controls=\"offcanvasTop\">Toggle Top offcanvas</button>
\t\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">Toggle right offcanvas</button>
\t\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasBottom\" aria-controls=\"offcanvasBottom\">Toggle bottom offcanvas</button>
\t\t\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-lg-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasLeft\" aria-controls=\"offcanvasLeft\">Toggle Left offcanvas</button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end d-flex flex-wrap gap-2-->

\t\t\t\t\t\t<div class=\"offcanvas offcanvas-top\" tabindex=\"-1\" id=\"offcanvasTop\" aria-labelledby=\"offcanvasTopLabel\">
\t\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t\t<h5 id=\"offcanvasTopLabel\">Offcanvas Top</h5>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t\t                                                        images, lists, etc.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t\t\t<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">
\t\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t\t<h5 id=\"offcanvasRightLabel\">Offcanvas right</h5>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t\t                                                        images, lists, etc.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t\t\t<div class=\"offcanvas offcanvas-bottom\" tabindex=\"-1\" id=\"offcanvasBottom\" aria-labelledby=\"offcanvasBottomLabel\">
\t\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasBottomLabel\">Offcanvas bottom</h5>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t\t                                                        images, lists, etc.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-->

\t\t\t\t\t\t<div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"offcanvasLeft\" aria-labelledby=\"offcanvasLeftLabel\">
\t\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t\t<h5 id=\"offcanvasLeftLabel\">Offcanvas Left</h5>
\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t\t                                                        images, lists, etc.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end tab-pan-->
\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Dark Offcanvas</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars.
\t\t\t\t\t\t                                            Here we add
\t\t\t\t\t\t<code>.text-bg-dark</code>
\t\t\t\t\t\tto the
\t\t\t\t\t\t<code>.offcanvas</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>.btn-close-white</code>
\t\t\t\t\t\tto
\t\t\t\t\t\t<code>.btn-close</code>
\t\t\t\t\t\tfor proper styling with a dark offcanvas. If you have dropdowns within, consider also adding
\t\t\t\t\t\t<code>.dropdown-menu-dark</code>
\t\t\t\t\t\tto
\t\t\t\t\t\t<code>.dropdown-menu</code>.</p>

\t\t\t\t\t<button class=\"btn btn-primary mt-2 mt-md-0\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasDark\" aria-controls=\"offcanvasDark\">Dark offcanvas</button>

\t\t\t\t\t<div class=\"offcanvas offcanvas-start text-bg-dark\" tabindex=\"-1\" id=\"offcanvasDark\" aria-labelledby=\"offcanvasDarkLabel\">
\t\t\t\t\t\t<div class=\"offcanvas-header\">
\t\t\t\t\t\t\t<h5 id=\"offcanvasDarkLabel\">Dark Offcanvas</h5>
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-header-->

\t\t\t\t\t\t<div class=\"offcanvas-body\">
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you have chosen. Like, text,
\t\t\t\t\t\t\t\t                                                    images, lists, etc.
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<h5 class=\"mt-3\">List</h5>
\t\t\t\t\t\t\t<ul class=\"ps-3\">
\t\t\t\t\t\t\t\t<li class=\"\">Nemo enim ipsam voluptatem quia aspernatur</li>
\t\t\t\t\t\t\t\t<li class=\"\">Neque porro quisquam est, qui dolorem</li>
\t\t\t\t\t\t\t\t<li class=\"\">Quis autem vel eum iure qui in ea</li>
\t\t\t\t\t\t\t</ul>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end offcanvas-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end offcanvas-->
\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row -->

{% endblock %}", "ui-offcanvas.html.twig", "/home/ct9/Desktop/Ishan/Jidox/jidox_symfony/templates/ui-offcanvas.html.twig");
    }
}
