templates/common/topbar.html.twig line 1

Open in your IDE?
  1. <header id="page-topbar">
  2.     <div class="navbar-header">
  3.         <div class="container-fluid">
  4.             <div class="float-end">
  5.                 <div class="dropdown d-inline-block d-lg-none ms-2">
  6.                     <button type="button" class="btn header-item noti-icon waves-effect"
  7.                             id="page-header-search-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
  8.                             aria-expanded="false">
  9.                         <i class="mdi mdi-magnify"></i>
  10.                     </button>
  11.                     <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
  12.                          aria-labelledby="page-header-search-dropdown">
  13.                         <form class="p-3">
  14.                             <div class="m-0">
  15.                                 <div class="input-group">
  16.                                     <input type="text" class="form-control" placeholder="Search ..."
  17.                                            aria-label="Recipient's username">
  18.                                     <div class="input-group-append">
  19.                                         <button class="btn btn-primary" type="submit"><i
  20.                                                     class="mdi mdi-magnify"></i></button>
  21.                                     </div>
  22.                                 </div>
  23.                             </div>
  24.                         </form>
  25.                     </div>
  26.                 </div>
  27.                 {#
  28.                 <div class="dropdown d-none d-sm-inline-block">
  29.                     <button type="button" class="btn header-item waves-effect" data-bs-toggle="dropdown"
  30.                             aria-haspopup="true" aria-expanded="false">
  31.                         <img class="" src="/qovex//images/flags/us.jpg" alt="Header Language" height="16">
  32.                     </button>
  33.                     <div class="dropdown-menu dropdown-menu-end">
  34.                         <!-- item-->
  35.                         <a href="javascript:void(0);" class="dropdown-item notify-item">
  36.                             <img src="/qovex//images/flags/spain.jpg" alt="user-image" class="me-1" height="12"> <span
  37.                                     class="align-middle">Spanish</span>
  38.                         </a>
  39.                         <!-- item-->
  40.                         <a href="javascript:void(0);" class="dropdown-item notify-item">
  41.                             <img src="/qovex//images/flags/germany.jpg" alt="user-image" class="me-1" height="12"> <span
  42.                                     class="align-middle">German</span>
  43.                         </a>
  44.                         <!-- item-->
  45.                         <a href="javascript:void(0);" class="dropdown-item notify-item">
  46.                             <img src="/qovex//images/flags/italy.jpg" alt="user-image" class="me-1" height="12"> <span
  47.                                     class="align-middle">Italian</span>
  48.                         </a>
  49.                         <!-- item-->
  50.                         <a href="javascript:void(0);" class="dropdown-item notify-item">
  51.                             <img src="/qovex//images/flags/russia.jpg" alt="user-image" class="me-1" height="12"> <span
  52.                                     class="align-middle">Russian</span>
  53.                         </a>
  54.                     </div>
  55.                 </div>
  56.                 #}
  57.                 <div class="dropdown d-none d-lg-inline-block ms-1">
  58.                     <button type="button" class="btn header-item noti-icon waves-effect" data-toggle="fullscreen">
  59.                         <i class="mdi mdi-fullscreen"></i>
  60.                     </button>
  61.                 </div>
  62.                 <div class="dropdown d-inline-block">
  63.                     <button type="button" class="btn header-item noti-icon waves-effect"
  64.                             id="page-header-notifications-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
  65.                             aria-expanded="false">
  66.                         <i class="mdi mdi-bell-outline"></i>
  67.                         <span class="badge rounded-pill bg-danger ">3</span>
  68.                     </button>
  69.                     <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
  70.                          aria-labelledby="page-header-notifications-dropdown">
  71.                         <div class="p-3">
  72.                             <div class="row align-items-center">
  73.                                 <div class="col">
  74.                                     <h6 class="m-0"> Notifications </h6>
  75.                                 </div>
  76.                                 <div class="col-auto">
  77.                                     <a href="#!" class="small"> View All</a>
  78.                                 </div>
  79.                             </div>
  80.                         </div>
  81.                         <div data-simplebar style="max-height: 230px;">
  82.                             <a href="" class="text-reset notification-item">
  83.                                 <div class="d-flex align-items-start">
  84.                                     <div class="avatar-xs me-3">
  85.                                                 <span class="avatar-title bg-primary rounded-circle font-size-16">
  86.                                                     <i class="bx bx-cart"></i>
  87.                                                 </span>
  88.                                     </div>
  89.                                     <div class="flex-1">
  90.                                         <h6 class="mt-0 mb-1">Your order is placed</h6>
  91.                                         <div class="font-size-12 text-muted">
  92.                                             <p class="mb-1">If several languages coalesce the grammar</p>
  93.                                             <p class="mb-0"><i class="mdi mdi-clock-outline"></i> 3 min ago</p>
  94.                                         </div>
  95.                                     </div>
  96.                                 </div>
  97.                             </a>
  98.                             <a href="" class="text-reset notification-item">
  99.                                 <div class="d-flex align-items-start">
  100.                                     <img src="/qovex//images/users/avatar-3.jpg" class="me-3 rounded-circle avatar-xs"
  101.                                          alt="user-pic">
  102.                                     <div class="flex-1">
  103.                                         <h6 class="mt-0 mb-1">James Lemire</h6>
  104.                                         <div class="font-size-12 text-muted">
  105.                                             <p class="mb-1">It will seem like simplified English.</p>
  106.                                             <p class="mb-0"><i class="mdi mdi-clock-outline"></i> 1 hours ago</p>
  107.                                         </div>
  108.                                     </div>
  109.                                 </div>
  110.                             </a>
  111.                             <a href="" class="text-reset notification-item">
  112.                                 <div class="d-flex align-items-start">
  113.                                     <div class="avatar-xs me-3">
  114.                                                 <span class="avatar-title bg-success rounded-circle font-size-16">
  115.                                                     <i class="bx bx-badge-check"></i>
  116.                                                 </span>
  117.                                     </div>
  118.                                     <div class="flex-1">
  119.                                         <h6 class="mt-0 mb-1">Your item is shipped</h6>
  120.                                         <div class="font-size-12 text-muted">
  121.                                             <p class="mb-1">If several languages coalesce the grammar</p>
  122.                                             <p class="mb-0"><i class="mdi mdi-clock-outline"></i> 3 min ago</p>
  123.                                         </div>
  124.                                     </div>
  125.                                 </div>
  126.                             </a>
  127.                             <a href="" class="text-reset notification-item">
  128.                                 <div class="d-flex align-items-start">
  129.                                     <img src="/qovex//images/users/avatar-4.jpg" class="me-3 rounded-circle avatar-xs"
  130.                                          alt="user-pic">
  131.                                     <div class="flex-1">
  132.                                         <h6 class="mt-0 mb-1">Salena Layfield</h6>
  133.                                         <div class="font-size-12 text-muted">
  134.                                             <p class="mb-1">As a skeptical Cambridge friend of mine occidental.</p>
  135.                                             <p class="mb-0"><i class="mdi mdi-clock-outline"></i> 1 hours ago</p>
  136.                                         </div>
  137.                                     </div>
  138.                                 </div>
  139.                             </a>
  140.                         </div>
  141.                         <div class="p-2 border-top d-grid">
  142.                             <a class="btn btn-sm btn-link font-size-14 " href="javascript:void(0)">
  143.                                 <i class="mdi mdi-arrow-right-circle me-1"></i> View More..
  144.                             </a>
  145.                         </div>
  146.                     </div>
  147.                 </div>
  148.                 <div class="dropdown d-inline-block">
  149.                     <button type="button" class="btn header-item waves-effect" id="page-header-user-dropdown"
  150.                             data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  151.                         <img class="rounded-circle header-profile-user" src="/qovex//images/users/avatar-2.jpg"
  152.                              alt="Header Avatar">
  153.                         <span class="d-none d-xl-inline-block ms-1">Ekodev</span>
  154.                         <i class="mdi mdi-chevron-down d-none d-xl-inline-block"></i>
  155.                     </button>
  156.                     <div class="dropdown-menu dropdown-menu-end">
  157.                         <!-- item-->
  158.                         <a class="dropdown-item" href="#"><i class="bx bx-user font-size-16 align-middle me-1"></i>
  159.                             Profile</a>
  160.                         <a class="dropdown-item" href="#"><i class="bx bx-wallet font-size-16 align-middle me-1"></i> My
  161.                             Wallet</a>
  162.                         <a class="dropdown-item d-block" href="#"><span class="badge bg-success float-end">11</span><i
  163.                                     class="bx bx-wrench font-size-16 align-middle me-1"></i> Settings</a>
  164.                         <a class="dropdown-item" href="#"><i class="bx bx-lock-open font-size-16 align-middle me-1"></i>
  165.                             Lock screen</a>
  166.                         <div class="dropdown-divider"></div>
  167.                         <a class="dropdown-item text-danger" href="#"><i
  168.                                     class="bx bx-power-off font-size-16 align-middle me-1 text-danger"></i> Logout</a>
  169.                     </div>
  170.                 </div>
  171.                 {#
  172.                 <div class="dropdown d-inline-block">
  173.                     <button type="button" class="btn header-item noti-icon right-bar-toggle waves-effect">
  174.                         <i class="mdi mdi-settings-outline"></i>
  175.                     </button>
  176.                 </div>
  177.                 #}
  178.             </div>
  179.             <div>
  180.                 <!-- LOGO -->
  181.                 <div class="navbar-brand-box">
  182.                     <a href="/" class="logo logo-dark">
  183.                                 <span class="logo-sm">
  184.                                     <img src="/qovex//images/logo-sm.png" alt="" height="20">
  185.                                 </span>
  186.                         <span class="logo-lg">
  187.                                     <img src="/qovex//images/logo-dark.png" alt="" height="17">
  188.                                 </span>
  189.                     </a>
  190.                     <a href="/" class="logo logo-light">
  191.                                 <span class="logo-sm">
  192.                                     <img src="/qovex//images/logo-sm.png" alt="" height="20">
  193.                                 </span>
  194.                         <span class="logo-lg">
  195.                                     <img src="/qovex//images/logo-light.png" alt="" height="19">
  196.                                 </span>
  197.                     </a>
  198.                 </div>
  199.                 <button type="button" class="btn btn-sm px-3 font-size-16 header-item toggle-btn waves-effect"
  200.                         id="vertical-menu-btn">
  201.                     <i class="fa fa-fw fa-bars"></i>
  202.                 </button>
  203.                 {#
  204.                 <!-- App Search-->
  205.                 <form class="app-search d-none d-lg-inline-block">
  206.                     <div class="position-relative">
  207.                         <input type="text" class="form-control" placeholder="Search...">
  208.                         <span class="bx bx-search-alt"></span>
  209.                     </div>
  210.                 </form>
  211.                 #}
  212.                 {#
  213.                 <div class="dropdown dropdown-mega d-none d-lg-inline-block ms-2">
  214.                     <button type="button" class="btn header-item waves-effect" data-bs-toggle="dropdown"
  215.                             aria-haspopup="false" aria-expanded="false">
  216.                         Mega Menu
  217.                         <i class="mdi mdi-chevron-down"></i>
  218.                     </button>
  219.                     <div class="dropdown-menu dropdown-megamenu">
  220.                         <div class="row">
  221.                             <div class="col-sm-6">
  222.                                 <div class="row">
  223.                                     <div class="col-md-4">
  224.                                         <h5 class="font-size-14 mt-0">UI Components</h5>
  225.                                         <ul class="list-unstyled megamenu-list text-muted">
  226.                                             <li>
  227.                                                 <a href="javascript:void(0);">Lightbox</a>
  228.                                             </li>
  229.                                             <li>
  230.                                                 <a href="javascript:void(0);">Range Slider</a>
  231.                                             </li>
  232.                                             <li>
  233.                                                 <a href="javascript:void(0);">Sweet Alert</a>
  234.                                             </li>
  235.                                             <li>
  236.                                                 <a href="javascript:void(0);">Rating</a>
  237.                                             </li>
  238.                                             <li>
  239.                                                 <a href="javascript:void(0);">Forms</a>
  240.                                             </li>
  241.                                             <li>
  242.                                                 <a href="javascript:void(0);">Tables</a>
  243.                                             </li>
  244.                                             <li>
  245.                                                 <a href="javascript:void(0);">Charts</a>
  246.                                             </li>
  247.                                         </ul>
  248.                                     </div>
  249.                                     <div class="col-md-4">
  250.                                         <h5 class="font-size-14 mt-0">Applications</h5>
  251.                                         <ul class="list-unstyled megamenu-list">
  252.                                             <li>
  253.                                                 <a href="javascript:void(0);">Ecommerce</a>
  254.                                             </li>
  255.                                             <li>
  256.                                                 <a href="javascript:void(0);">Calendar</a>
  257.                                             </li>
  258.                                             <li>
  259.                                                 <a href="javascript:void(0);">Email</a>
  260.                                             </li>
  261.                                             <li>
  262.                                                 <a href="javascript:void(0);">Projects</a>
  263.                                             </li>
  264.                                             <li>
  265.                                                 <a href="javascript:void(0);">Tasks</a>
  266.                                             </li>
  267.                                             <li>
  268.                                                 <a href="javascript:void(0);">Contacts</a>
  269.                                             </li>
  270.                                         </ul>
  271.                                     </div>
  272.                                     <div class="col-md-4">
  273.                                         <h5 class="font-size-14 mt-0">Extra Pages</h5>
  274.                                         <ul class="list-unstyled megamenu-list">
  275.                                             <li>
  276.                                                 <a href="javascript:void(0);">Light Sidebar</a>
  277.                                             </li>
  278.                                             <li>
  279.                                                 <a href="javascript:void(0);">Compact Sidebar</a>
  280.                                             </li>
  281.                                             <li>
  282.                                                 <a href="javascript:void(0);">Horizontal layout</a>
  283.                                             </li>
  284.                                             <li>
  285.                                                 <a href="javascript:void(0);">Maintenance</a>
  286.                                             </li>
  287.                                             <li>
  288.                                                 <a href="javascript:void(0);">Coming Soon</a>
  289.                                             </li>
  290.                                             <li>
  291.                                                 <a href="javascript:void(0);">Timeline</a>
  292.                                             </li>
  293.                                             <li>
  294.                                                 <a href="javascript:void(0);">FAQs</a>
  295.                                             </li>
  296.                                         </ul>
  297.                                     </div>
  298.                                 </div>
  299.                             </div>
  300.                             <div class="col-sm-6">
  301.                                 <div class="row">
  302.                                     <div class="col-sm-6">
  303.                                         <h5 class="font-size-14 mt-0">Components</h5>
  304.                                         <div class="px-lg-2">
  305.                                             <div class="row g-0">
  306.                                                 <div class="col">
  307.                                                     <a class="dropdown-icon-item" href="#">
  308.                                                         <img src="/qovex//images/brands/github.png" alt="Github">
  309.                                                         <span>GitHub</span>
  310.                                                     </a>
  311.                                                 </div>
  312.                                                 <div class="col">
  313.                                                     <a class="dropdown-icon-item" href="#">
  314.                                                         <img src="/qovex//images/brands/bitbucket.png" alt="bitbucket">
  315.                                                         <span>Bitbucket</span>
  316.                                                     </a>
  317.                                                 </div>
  318.                                                 <div class="col">
  319.                                                     <a class="dropdown-icon-item" href="#">
  320.                                                         <img src="/qovex//images/brands/dribbble.png" alt="dribbble">
  321.                                                         <span>Dribbble</span>
  322.                                                     </a>
  323.                                                 </div>
  324.                                             </div>
  325.                                             <div class="row g-0">
  326.                                                 <div class="col">
  327.                                                     <a class="dropdown-icon-item" href="#">
  328.                                                         <img src="/qovex//images/brands/dropbox.png" alt="dropbox">
  329.                                                         <span>Dropbox</span>
  330.                                                     </a>
  331.                                                 </div>
  332.                                                 <div class="col">
  333.                                                     <a class="dropdown-icon-item" href="#">
  334.                                                         <img src="/qovex//images/brands/mail_chimp.png" alt="mail_chimp">
  335.                                                         <span>Mail Chimp</span>
  336.                                                     </a>
  337.                                                 </div>
  338.                                                 <div class="col">
  339.                                                     <a class="dropdown-icon-item" href="#">
  340.                                                         <img src="/qovex//images/brands/slack.png" alt="slack">
  341.                                                         <span>Slack</span>
  342.                                                     </a>
  343.                                                 </div>
  344.                                             </div>
  345.                                         </div>
  346.                                     </div>
  347.                                     <div class="col-sm-6">
  348.                                         <div>
  349.                                             <div class="card text-white mb-0 overflow-hidden text-white-50"
  350.                                                  style="background-image: url('/qovex//images/megamenu-img.png');background-size: cover;">
  351.                                                 <div class="card-img-overlay"></div>
  352.                                                 <div class="card-body">
  353.                                                     <div class="row">
  354.                                                         <div class="col-xl-6">
  355.                                                             <h4 class="text-white mb-3">Sale</h4>
  356.                                                             <h5 class="text-white-50">Up to <span
  357.                                                                         class="font-size-24 text-white">50 %</span> Off</h5>
  358.                                                             <p>At vero eos accusamus et iusto odio.</p>
  359.                                                             <div class="mb-4">
  360.                                                                 <a href="#" class="btn btn-success btn-sm">View more</a>
  361.                                                             </div>
  362.                                                         </div>
  363.                                                     </div>
  364.                                                 </div>
  365.                                             </div>
  366.                                         </div>
  367.                                     </div>
  368.                                 </div>
  369.                             </div>
  370.                         </div>
  371.                     </div>
  372.                 </div>
  373.                 #}
  374.             </div>
  375.         </div>
  376.     </div>
  377. </header> <!-- ========== Left Sidebar Start ========== -->