templates/bo/layout/_switcher.html.twig line 1

Open in your IDE?
  1. <!-- Start Switcher -->
  2. <div class="offcanvas offcanvas-end" tabindex="-1" id="switcher-canvas" aria-labelledby="offcanvasRightLabel">
  3.     <div class="offcanvas-header border-bottom">
  4.         <h5 class="offcanvas-title text-default" id="offcanvasRightLabel">Switcher</h5>
  5.         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  6.     </div>
  7.     <div class="offcanvas-body">
  8.         <nav class="border-bottom border-block-end-dashed">
  9.             <div class="nav nav-tabs nav-justified" id="switcher-main-tab" role="tablist">
  10.                 <button class="nav-link active" id="switcher-home-tab" data-bs-toggle="tab" data-bs-target="#switcher-home"
  11.                         type="button" role="tab" aria-controls="switcher-home" aria-selected="true">Theme Styles</button>
  12.                 <button class="nav-link" id="switcher-profile-tab" data-bs-toggle="tab" data-bs-target="#switcher-profile"
  13.                         type="button" role="tab" aria-controls="switcher-profile" aria-selected="false">Theme Colors</button>
  14.             </div>
  15.         </nav>
  16.         <div class="tab-content" id="nav-tabContent">
  17.             <div class="tab-pane fade show active border-0" id="switcher-home" role="tabpanel" aria-labelledby="switcher-home-tab"
  18.                  tabindex="0">
  19.                 <div class="">
  20.                     <p class="switcher-style-head">Theme Color Mode:</p>
  21.                     <div class="row switcher-style gx-0">
  22.                         <div class="col-4">
  23.                             <div class="form-check switch-select">
  24.                                 <label class="form-check-label" for="switcher-light-theme">
  25.                                     Light
  26.                                 </label>
  27.                                 <input class="form-check-input" type="radio" name="theme-style" id="switcher-light-theme"
  28.                                        checked>
  29.                             </div>
  30.                         </div>
  31.                         <div class="col-4">
  32.                             <div class="form-check switch-select">
  33.                                 <label class="form-check-label" for="switcher-dark-theme">
  34.                                     Dark
  35.                                 </label>
  36.                                 <input class="form-check-input" type="radio" name="theme-style" id="switcher-dark-theme">
  37.                             </div>
  38.                         </div>
  39.                     </div>
  40.                 </div>
  41.                 <div class="">
  42.                     <p class="switcher-style-head">Directions:</p>
  43.                     <div class="row switcher-style gx-0">
  44.                         <div class="col-4">
  45.                             <div class="form-check switch-select">
  46.                                 <label class="form-check-label" for="switcher-ltr">
  47.                                     LTR
  48.                                 </label>
  49.                                 <input class="form-check-input" type="radio" name="direction" id="switcher-ltr" checked>
  50.                             </div>
  51.                         </div>
  52.                         <div class="col-4">
  53.                             <div class="form-check switch-select">
  54.                                 <label class="form-check-label" for="switcher-rtl">
  55.                                     RTL
  56.                                 </label>
  57.                                 <input class="form-check-input" type="radio" name="direction" id="switcher-rtl">
  58.                             </div>
  59.                         </div>
  60.                     </div>
  61.                 </div>
  62.                 <div class="">
  63.                     <p class="switcher-style-head">Navigation Styles:</p>
  64.                     <div class="row switcher-style gx-0">
  65.                         <div class="col-4">
  66.                             <div class="form-check switch-select">
  67.                                 <label class="form-check-label" for="switcher-vertical">
  68.                                     Vertical
  69.                                 </label>
  70.                                 <input class="form-check-input" type="radio" name="navigation-style" id="switcher-vertical"
  71.                                        checked>
  72.                             </div>
  73.                         </div>
  74.                         <div class="col-4">
  75.                             <div class="form-check switch-select">
  76.                                 <label class="form-check-label" for="switcher-horizontal">
  77.                                     Horizontal
  78.                                 </label>
  79.                                 <input class="form-check-input" type="radio" name="navigation-style"
  80.                                        id="switcher-horizontal">
  81.                             </div>
  82.                         </div>
  83.                     </div>
  84.                 </div>
  85.                 <div class="navigation-menu-styles">
  86.                     <p class="switcher-style-head">Vertical & Horizontal Menu Styles:</p>
  87.                     <div class="row switcher-style gx-0 pb-2 gy-2">
  88.                         <div class="col-4">
  89.                             <div class="form-check switch-select">
  90.                                 <label class="form-check-label" for="switcher-menu-click">
  91.                                     Menu Click
  92.                                 </label>
  93.                                 <input class="form-check-input" type="radio" name="navigation-menu-styles"
  94.                                        id="switcher-menu-click">
  95.                             </div>
  96.                         </div>
  97.                         <div class="col-4">
  98.                             <div class="form-check switch-select">
  99.                                 <label class="form-check-label" for="switcher-menu-hover">
  100.                                     Menu Hover
  101.                                 </label>
  102.                                 <input class="form-check-input" type="radio" name="navigation-menu-styles"
  103.                                        id="switcher-menu-hover">
  104.                             </div>
  105.                         </div>
  106.                         <div class="col-4">
  107.                             <div class="form-check switch-select">
  108.                                 <label class="form-check-label" for="switcher-icon-click">
  109.                                     Icon Click
  110.                                 </label>
  111.                                 <input class="form-check-input" type="radio" name="navigation-menu-styles"
  112.                                        id="switcher-icon-click">
  113.                             </div>
  114.                         </div>
  115.                         <div class="col-4">
  116.                             <div class="form-check switch-select">
  117.                                 <label class="form-check-label" for="switcher-icon-hover">
  118.                                     Icon Hover
  119.                                 </label>
  120.                                 <input class="form-check-input" type="radio" name="navigation-menu-styles"
  121.                                        id="switcher-icon-hover">
  122.                             </div>
  123.                         </div>
  124.                     </div>
  125.                 </div>
  126.                 <div class="sidemenu-layout-styles">
  127.                     <p class="switcher-style-head">Sidemenu Layout Styles:</p>
  128.                     <div class="row switcher-style gx-0 pb-2 gy-2">
  129.                         <div class="col-sm-6">
  130.                             <div class="form-check switch-select">
  131.                                 <label class="form-check-label" for="switcher-default-menu">
  132.                                     Default Menu
  133.                                 </label>
  134.                                 <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
  135.                                        id="switcher-default-menu" checked>
  136.                             </div>
  137.                         </div>
  138.                         <div class="col-sm-6">
  139.                             <div class="form-check switch-select">
  140.                                 <label class="form-check-label" for="switcher-closed-menu">
  141.                                     Closed Menu
  142.                                 </label>
  143.                                 <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
  144.                                        id="switcher-closed-menu">
  145.                             </div>
  146.                         </div>
  147.                         <div class="col-sm-6">
  148.                             <div class="form-check switch-select">
  149.                                 <label class="form-check-label" for="switcher-icontext-menu">
  150.                                     Icon Text
  151.                                 </label>
  152.                                 <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
  153.                                        id="switcher-icontext-menu">
  154.                             </div>
  155.                         </div>
  156.                         <div class="col-sm-6">
  157.                             <div class="form-check switch-select">
  158.                                 <label class="form-check-label" for="switcher-icon-overlay">
  159.                                     Icon Overlay
  160.                                 </label>
  161.                                 <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
  162.                                        id="switcher-icon-overlay">
  163.                             </div>
  164.                         </div>
  165.                         <div class="col-sm-6">
  166.                             <div class="form-check switch-select">
  167.                                 <label class="form-check-label" for="switcher-detached">
  168.                                     Detached
  169.                                 </label>
  170.                                 <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
  171.                                        id="switcher-detached">
  172.                             </div>
  173.                         </div>
  174.                         <div class="col-sm-6">
  175.                             <div class="form-check switch-select">
  176.                                 <label class="form-check-label" for="switcher-double-menu">
  177.                                     Double Menu
  178.                                 </label>
  179.                                 <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
  180.                                        id="switcher-double-menu">
  181.                             </div>
  182.                         </div>
  183.                     </div>
  184.                 </div>
  185.                 <div class="">
  186.                     <p class="switcher-style-head">Page Styles:</p>
  187.                     <div class="row switcher-style gx-0">
  188.                         <div class="col-4">
  189.                             <div class="form-check switch-select">
  190.                                 <label class="form-check-label" for="switcher-regular">
  191.                                     Regular
  192.                                 </label>
  193.                                 <input class="form-check-input" type="radio" name="page-styles" id="switcher-regular"
  194.                                        checked>
  195.                             </div>
  196.                         </div>
  197.                         <div class="col-4">
  198.                             <div class="form-check switch-select">
  199.                                 <label class="form-check-label" for="switcher-classic">
  200.                                     Classic
  201.                                 </label>
  202.                                 <input class="form-check-input" type="radio" name="page-styles" id="switcher-classic">
  203.                             </div>
  204.                         </div>
  205.                         <div class="col-4">
  206.                             <div class="form-check switch-select">
  207.                                 <label class="form-check-label" for="switcher-modern">
  208.                                     Modern
  209.                                 </label>
  210.                                 <input class="form-check-input" type="radio" name="page-styles" id="switcher-modern">
  211.                             </div>
  212.                         </div>
  213.                     </div>
  214.                 </div>
  215.                 <div class="">
  216.                     <p class="switcher-style-head">Layout Width Styles:</p>
  217.                     <div class="row switcher-style gx-0">
  218.                         <div class="col-4">
  219.                             <div class="form-check switch-select">
  220.                                 <label class="form-check-label" for="switcher-full-width">
  221.                                     Full Width
  222.                                 </label>
  223.                                 <input class="form-check-input" type="radio" name="layout-width" id="switcher-full-width"
  224.                                        checked>
  225.                             </div>
  226.                         </div>
  227.                         <div class="col-4">
  228.                             <div class="form-check switch-select">
  229.                                 <label class="form-check-label" for="switcher-boxed">
  230.                                     Boxed
  231.                                 </label>
  232.                                 <input class="form-check-input" type="radio" name="layout-width" id="switcher-boxed">
  233.                             </div>
  234.                         </div>
  235.                     </div>
  236.                 </div>
  237.                 <div class="">
  238.                     <p class="switcher-style-head">Menu Positions:</p>
  239.                     <div class="row switcher-style gx-0">
  240.                         <div class="col-4">
  241.                             <div class="form-check switch-select">
  242.                                 <label class="form-check-label" for="switcher-menu-fixed">
  243.                                     Fixed
  244.                                 </label>
  245.                                 <input class="form-check-input" type="radio" name="menu-positions" id="switcher-menu-fixed"
  246.                                        checked>
  247.                             </div>
  248.                         </div>
  249.                         <div class="col-4">
  250.                             <div class="form-check switch-select">
  251.                                 <label class="form-check-label" for="switcher-menu-scroll">
  252.                                     Scrollable
  253.                                 </label>
  254.                                 <input class="form-check-input" type="radio" name="menu-positions" id="switcher-menu-scroll">
  255.                             </div>
  256.                         </div>
  257.                     </div>
  258.                 </div>
  259.                 <div class="">
  260.                     <p class="switcher-style-head">Header Positions:</p>
  261.                     <div class="row switcher-style gx-0">
  262.                         <div class="col-4">
  263.                             <div class="form-check switch-select">
  264.                                 <label class="form-check-label" for="switcher-header-fixed">
  265.                                     Fixed
  266.                                 </label>
  267.                                 <input class="form-check-input" type="radio" name="header-positions"
  268.                                        id="switcher-header-fixed" checked>
  269.                             </div>
  270.                         </div>
  271.                         <div class="col-4">
  272.                             <div class="form-check switch-select">
  273.                                 <label class="form-check-label" for="switcher-header-scroll">
  274.                                     Scrollable
  275.                                 </label>
  276.                                 <input class="form-check-input" type="radio" name="header-positions"
  277.                                        id="switcher-header-scroll">
  278.                             </div>
  279.                         </div>
  280.                     </div>
  281.                 </div>
  282.             </div>
  283.             <div class="tab-pane fade border-0" id="switcher-profile" role="tabpanel" aria-labelledby="switcher-profile-tab" tabindex="0">
  284.                 <div>
  285.                     <div class="theme-colors">
  286.                         <p class="switcher-style-head">Menu Colors:</p>
  287.                         <div class="d-flex switcher-style pb-2">
  288.                             <div class="form-check switch-select me-3">
  289.                                 <input class="form-check-input color-input color-white" data-bs-toggle="tooltip"
  290.                                        data-bs-placement="top" title="Light Menu" type="radio" name="menu-colors"
  291.                                        id="switcher-menu-light">
  292.                             </div>
  293.                             <div class="form-check switch-select me-3">
  294.                                 <input class="form-check-input color-input color-dark" data-bs-toggle="tooltip"
  295.                                        data-bs-placement="top" title="Dark Menu" type="radio" name="menu-colors"
  296.                                        id="switcher-menu-dark" checked>
  297.                             </div>
  298.                             <div class="form-check switch-select me-3">
  299.                                 <input class="form-check-input color-input color-primary" data-bs-toggle="tooltip"
  300.                                        data-bs-placement="top" title="Color Menu" type="radio" name="menu-colors"
  301.                                        id="switcher-menu-primary">
  302.                             </div>
  303.                             <div class="form-check switch-select me-3">
  304.                                 <input class="form-check-input color-input color-gradient" data-bs-toggle="tooltip"
  305.                                        data-bs-placement="top" title="Gradient Menu" type="radio" name="menu-colors"
  306.                                        id="switcher-menu-gradient">
  307.                             </div>
  308.                             <div class="form-check switch-select me-3">
  309.                                 <input class="form-check-input color-input color-transparent"
  310.                                        data-bs-toggle="tooltip" data-bs-placement="top" title="Transparent Menu"
  311.                                        type="radio" name="menu-colors" id="switcher-menu-transparent">
  312.                             </div>
  313.                         </div>
  314.                         <div class="px-4 pb-3 text-muted fs-11">Note:If you want to change color Menu dynamically change from below Theme Primary color picker</div>
  315.                     </div>
  316.                     <div class="theme-colors">
  317.                         <p class="switcher-style-head">Header Colors:</p>
  318.                         <div class="d-flex switcher-style pb-2">
  319.                             <div class="form-check switch-select me-3">
  320.                                 <input class="form-check-input color-input color-white" data-bs-toggle="tooltip"
  321.                                        data-bs-placement="top" title="Light Header" type="radio" name="header-colors"
  322.                                        id="switcher-header-light" checked>
  323.                             </div>
  324.                             <div class="form-check switch-select me-3">
  325.                                 <input class="form-check-input color-input color-dark" data-bs-toggle="tooltip"
  326.                                        data-bs-placement="top" title="Dark Header" type="radio" name="header-colors"
  327.                                        id="switcher-header-dark">
  328.                             </div>
  329.                             <div class="form-check switch-select me-3">
  330.                                 <input class="form-check-input color-input color-primary" data-bs-toggle="tooltip"
  331.                                        data-bs-placement="top" title="Color Header" type="radio" name="header-colors"
  332.                                        id="switcher-header-primary">
  333.                             </div>
  334.                             <div class="form-check switch-select me-3">
  335.                                 <input class="form-check-input color-input color-gradient" data-bs-toggle="tooltip"
  336.                                        data-bs-placement="top" title="Gradient Header" type="radio" name="header-colors"
  337.                                        id="switcher-header-gradient">
  338.                             </div>
  339.                             <div class="form-check switch-select me-3">
  340.                                 <input class="form-check-input color-input color-transparent" data-bs-toggle="tooltip"
  341.                                        data-bs-placement="top" title="Transparent Header" type="radio" name="header-colors"
  342.                                        id="switcher-header-transparent">
  343.                             </div>
  344.                         </div>
  345.                         <div class="px-4 pb-3 text-muted fs-11">Note:If you want to change color Header dynamically change from below Theme Primary color picker</div>
  346.                     </div>
  347.                     <div class="theme-colors">
  348.                         <p class="switcher-style-head">Theme Primary:</p>
  349.                         <div class="d-flex flex-wrap align-items-center switcher-style">
  350.                             <div class="form-check switch-select me-3">
  351.                                 <input class="form-check-input color-input color-primary-1" type="radio"
  352.                                        name="theme-primary" id="switcher-primary">
  353.                             </div>
  354.                             <div class="form-check switch-select me-3">
  355.                                 <input class="form-check-input color-input color-primary-2" type="radio"
  356.                                        name="theme-primary" id="switcher-primary1">
  357.                             </div>
  358.                             <div class="form-check switch-select me-3">
  359.                                 <input class="form-check-input color-input color-primary-3" type="radio" name="theme-primary"
  360.                                        id="switcher-primary2">
  361.                             </div>
  362.                             <div class="form-check switch-select me-3">
  363.                                 <input class="form-check-input color-input color-primary-4" type="radio" name="theme-primary"
  364.                                        id="switcher-primary3">
  365.                             </div>
  366.                             <div class="form-check switch-select me-3">
  367.                                 <input class="form-check-input color-input color-primary-5" type="radio" name="theme-primary"
  368.                                        id="switcher-primary4">
  369.                             </div>
  370.                             <div class="form-check switch-select ps-0 mt-1 color-primary-light">
  371.                                 <div class="theme-container-primary"></div>
  372.                                 <div class="pickr-container-primary"></div>
  373.                             </div>
  374.                         </div>
  375.                     </div>
  376.                     <div class="theme-colors">
  377.                         <p class="switcher-style-head">Theme Background:</p>
  378.                         <div class="d-flex flex-wrap align-items-center switcher-style">
  379.                             <div class="form-check switch-select me-3">
  380.                                 <input class="form-check-input color-input color-bg-1" type="radio"
  381.                                        name="theme-background" id="switcher-background">
  382.                             </div>
  383.                             <div class="form-check switch-select me-3">
  384.                                 <input class="form-check-input color-input color-bg-2" type="radio"
  385.                                        name="theme-background" id="switcher-background1">
  386.                             </div>
  387.                             <div class="form-check switch-select me-3">
  388.                                 <input class="form-check-input color-input color-bg-3" type="radio" name="theme-background"
  389.                                        id="switcher-background2">
  390.                             </div>
  391.                             <div class="form-check switch-select me-3">
  392.                                 <input class="form-check-input color-input color-bg-4" type="radio"
  393.                                        name="theme-background" id="switcher-background3">
  394.                             </div>
  395.                             <div class="form-check switch-select me-3">
  396.                                 <input class="form-check-input color-input color-bg-5" type="radio"
  397.                                        name="theme-background" id="switcher-background4">
  398.                             </div>
  399.                             <div class="form-check switch-select ps-0 mt-1 tooltip-static-demo color-bg-transparent">
  400.                                 <div class="theme-container-background"></div>
  401.                                 <div class="pickr-container-background"></div>
  402.                             </div>
  403.                         </div>
  404.                     </div>
  405.                     <div class="menu-image mb-3">
  406.                         <p class="switcher-style-head">Menu With Background Image:</p>
  407.                         <div class="d-flex flex-wrap align-items-center switcher-style">
  408.                             <div class="form-check switch-select m-2">
  409.                                 <input class="form-check-input bgimage-input bg-img1" type="radio"
  410.                                        name="theme-background" id="switcher-bg-img">
  411.                             </div>
  412.                             <div class="form-check switch-select m-2">
  413.                                 <input class="form-check-input bgimage-input bg-img2" type="radio"
  414.                                        name="theme-background" id="switcher-bg-img1">
  415.                             </div>
  416.                             <div class="form-check switch-select m-2">
  417.                                 <input class="form-check-input bgimage-input bg-img3" type="radio" name="theme-background"
  418.                                        id="switcher-bg-img2">
  419.                             </div>
  420.                             <div class="form-check switch-select m-2">
  421.                                 <input class="form-check-input bgimage-input bg-img4" type="radio"
  422.                                        name="theme-background" id="switcher-bg-img3">
  423.                             </div>
  424.                             <div class="form-check switch-select m-2">
  425.                                 <input class="form-check-input bgimage-input bg-img5" type="radio"
  426.                                        name="theme-background" id="switcher-bg-img4">
  427.                             </div>
  428.                         </div>
  429.                     </div>
  430.                 </div>
  431.             </div>
  432.             <div class="canvas-footer d-grid">
  433.                 <a href="javascript:void(0);" id="reset-all" class="btn btn-danger m-1">Reset</a>
  434.             </div>
  435.         </div>
  436.     </div>
  437. </div>
  438. <!-- End Switcher -->