templates/partials/topbar.html.twig line 1

Open in your IDE?
  1. <header id="page-topbar">
  2.     <div class="navbar-header">
  3.         <div class="d-flex">
  4.             <!-- LOGO -->
  5.             <div class="navbar-brand-box">
  6.                 <a href="{{ path('home') }}" class="logo logo-dark">
  7.                     <span class="logo-sm">
  8.                         <img src="/images/logo-sm.svg" alt="" height="24">
  9.                     </span>
  10.                     <span class="logo-lg">
  11.                         <img src="/images/logo-sm.svg" alt="" height="24"> <span class="logo-txt">Minia</span>
  12.                     </span>
  13.                 </a>
  15.                 <a href="{{ path('home') }}" class="logo logo-light">
  16.                     <span class="logo-sm">
  17.                         <img src="/images/logo-sm.svg" alt="" height="24">
  18.                     </span>
  19.                     <span class="logo-lg">
  20.                         <img src="/images/logo-sm.svg" alt="" height="24"> <span class="logo-txt">Minia</span>
  21.                     </span>
  22.                 </a>
  23.             </div>
  25.             <button type="button" class="btn btn-sm px-3 font-size-16 header-item" id="vertical-menu-btn">
  26.                 <i class="fa fa-fw fa-bars"></i>
  27.             </button>
  29.             <!-- App Search-->
  30.             <form class="app-search d-none d-lg-block">
  31.                 <div class="position-relative">
  32.                     <input type="text" class="form-control" placeholder="{% trans %}Search{% endtrans %}...">
  33.                     <button class="btn btn-primary" type="button"><i class="bx bx-search-alt align-middle"></i></button>
  34.                 </div>
  35.             </form>
  36.         </div>
  38.         <div class="d-flex">
  40.             <div class="dropdown d-inline-block d-lg-none ms-2">
  41.                 <button type="button" class="btn header-item" id="page-header-search-dropdown"
  42.                 data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  43.                     <i data-feather="search" class="icon-lg"></i>
  44.                 </button>
  45.                 <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
  46.                     aria-labelledby="page-header-search-dropdown">
  47.         
  48.                     <form class="p-3">
  49.                         <div class="form-group m-0">
  50.                             <div class="input-group">
  51.                                 <input type="text" class="form-control" placeholder="{% trans %}Search{% endtrans %}..." aria-label="Search Result">
  53.                                 <button class="btn btn-primary" type="submit"><i class="mdi mdi-magnify"></i></button>
  54.                             </div>
  55.                         </div>
  56.                     </form>
  57.                 </div>
  58.             </div>
  60.             <div class="dropdown d-none d-sm-inline-block">
  61.                 <button type="button" class="btn header-item"
  62.                 data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  63.                     {% if app.request.locale == 'en' %}
  64.                        <img class="header-lang-img" src="/images/flags/us.jpg" alt="Header Language" height="16">
  65.                     {% elseif app.request.locale == 'es' %}
  66.                        <img class="header-lang-img" src="/images/flags/spain.jpg" alt="Header Language" height="16">
  67.                     {% elseif app.request.locale == 'de' %}
  68.                         <img class="header-lang-img" src="/images/flags/germany.jpg" alt="Header Language" height="16">
  69.                     {% elseif app.request.locale == 'it' %}
  70.                         <img class="header-lang-img" src="/images/flags/italy.jpg" alt="Header Language" height="16">
  71.                     {% elseif app.request.locale == 'ru' %}
  72.                         <img class="header-lang-img" src="/images/flags/russia.jpg" alt="Header Language" height="16">
  73.                     {% else %}
  74.                        <img class="header-lang-img" src="/images/flags/us.jpg" alt="Header Language" height="16">
  75.                     {% endif %}
  76.                 </button>
  77.                 <div class="dropdown-menu dropdown-menu-end">
  79.                     {% if app.request.locale != 'en' %}
  80.                     <!-- item-->
  81.                     <a href="lang/en" class="dropdown-item notify-item language" data-lang="eng">
  82.                         <img src="/images/flags/us.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">English</span>
  83.                     </a>
  84.                     {% endif %}
  86.                     {% if app.request.locale != 'es' %}
  87.                     <!-- item-->
  88.                     <a href="lang/es" class="dropdown-item notify-item language" data-lang="sp">
  89.                         <img src="/images/flags/spain.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Spanish</span>
  90.                     </a>
  91.                     {% endif %}
  92.                     
  93.                     {% if app.request.locale != 'de' %}
  94.                     <!-- item-->
  95.                     <a href="lang/de" class="dropdown-item notify-item language" data-lang="gr">
  96.                         <img src="/images/flags/germany.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">German</span>
  97.                     </a>
  98.                     {% endif %}
  100.                     {% if app.request.locale != 'it' %}
  101.                     <!-- item-->
  102.                     <a href="lang/it" class="dropdown-item notify-item language" data-lang="it">
  103.                         <img src="/images/flags/italy.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Italian</span>
  104.                     </a>
  105.                     {% endif %}
  107.                     {% if app.request.locale != 'ru' %}
  108.                     <!-- item-->
  109.                     <a href="lang/ru" class="dropdown-item notify-item language" data-lang="ru">
  110.                         <img src="/images/flags/russia.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Russian</span>
  111.                     </a>
  112.                     {% endif %}
  113.                     
  114.                 </div>
  115.             </div>
  117.             <div class="dropdown d-none d-sm-inline-block">
  118.                 <button type="button" class="btn header-item" id="mode-setting-btn">
  119.                     <i data-feather="moon" class="icon-lg layout-mode-dark"></i>
  120.                     <i data-feather="sun" class="icon-lg layout-mode-light"></i>
  121.                 </button>
  122.             </div>
  124.             <div class="dropdown d-none d-lg-inline-block ms-1">
  125.                 <button type="button" class="btn header-item"
  126.                 data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  127.                     <i data-feather="grid" class="icon-lg"></i>
  128.                 </button>
  129.                 <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
  130.                     <div class="p-2">
  131.                         <div class="row g-0">
  132.                             <div class="col">
  133.                                 <a class="dropdown-icon-item" href="#">
  134.                                     <img src="/images/brands/github.png" alt="Github">
  135.                                     <span>GitHub</span>
  136.                                 </a>
  137.                             </div>
  138.                             <div class="col">
  139.                                 <a class="dropdown-icon-item" href="#">
  140.                                     <img src="/images/brands/bitbucket.png" alt="bitbucket">
  141.                                     <span>Bitbucket</span>
  142.                                 </a>
  143.                             </div>
  144.                             <div class="col">
  145.                                 <a class="dropdown-icon-item" href="#">
  146.                                     <img src="/images/brands/dribbble.png" alt="dribbble">
  147.                                     <span>Dribbble</span>
  148.                                 </a>
  149.                             </div>
  150.                         </div>
  152.                         <div class="row g-0">
  153.                             <div class="col">
  154.                                 <a class="dropdown-icon-item" href="#">
  155.                                     <img src="/images/brands/dropbox.png" alt="dropbox">
  156.                                     <span>Dropbox</span>
  157.                                 </a>
  158.                             </div>
  159.                             <div class="col">
  160.                                 <a class="dropdown-icon-item" href="#">
  161.                                     <img src="/images/brands/mail_chimp.png" alt="mail_chimp">
  162.                                     <span>Mail Chimp</span>
  163.                                 </a>
  164.                             </div>
  165.                             <div class="col">
  166.                                 <a class="dropdown-icon-item" href="#">
  167.                                     <img src="/images/brands/slack.png" alt="slack">
  168.                                     <span>Slack</span>
  169.                                 </a>
  170.                             </div>
  171.                         </div>
  172.                     </div>
  173.                 </div>
  174.             </div>
  176.             <div class="dropdown d-inline-block">
  177.                 <button type="button" class="btn header-item noti-icon position-relative" id="page-header-notifications-dropdown"
  178.                 data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  179.                     <i data-feather="bell" class="icon-lg"></i>
  180.                     <span class="badge bg-danger rounded-pill">5</span>
  181.                 </button>
  182.                 <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
  183.                     aria-labelledby="page-header-notifications-dropdown">
  184.                     <div class="p-3">
  185.                         <div class="row align-items-center">
  186.                             <div class="col">
  187.                                 <h6 class="m-0"> {% trans %}Notifications{% endtrans %} </h6>
  188.                             </div>
  189.                             <div class="col-auto">
  190.                                 <a href="#!" class="small text-reset text-decoration-underline"> {% trans %}Unread{% endtrans %} (3)</a>
  191.                             </div>
  192.                         </div>
  193.                     </div>
  194.                     <div data-simplebar style="max-height: 230px;">
  195.                         <a href="#!" class="text-reset notification-item">
  196.                             <div class="d-flex">
  197.                                 <div class="flex-shrink-0 me-3">
  198.                                     <img src="/images/users/avatar-3.jpg" class="rounded-circle avatar-sm" alt="user-pic">
  199.                                 </div>
  200.                                 <div class="flex-grow-1">
  201.                                     <h6 class="mb-1">{% trans %}James Lemire{% endtrans %}</h6>
  202.                                     <div class="font-size-13 text-muted">
  203.                                         <p class="mb-1">{% trans %}It will seem like simplified English{% endtrans %}.</p>
  204.                                         <p class="mb-0"><i class="mdi mdi-clock-outline"></i> <span>{% trans %}1 hour ago{% endtrans %}</span></p>
  205.                                     </div>
  206.                                 </div>
  207.                             </div>
  208.                         </a>
  209.                         <a href="#!" class="text-reset notification-item">
  210.                             <div class="d-flex">
  211.                                 <div class="flex-shrink-0 avatar-sm me-3">
  212.                                     <span class="avatar-title bg-primary rounded-circle font-size-16">
  213.                                         <i class="bx bx-cart"></i>
  214.                                     </span>
  215.                                 </div>
  216.                                 <div class="flex-grow-1">
  217.                                     <h6 class="mb-1">{% trans %}Your order is placed{% endtrans %}</h6>
  218.                                     <div class="font-size-13 text-muted">
  219.                                         <p class="mb-1">{% trans %}If several languages coalesce the grammar{% endtrans %}</p>
  220.                                         <p class="mb-0"><i class="mdi mdi-clock-outline"></i> <span>{% trans %}3 min ago{% endtrans %}</span></p>
  221.                                     </div>
  222.                                 </div>
  223.                             </div>
  224.                         </a>
  225.                         <a href="#!" class="text-reset notification-item">
  226.                             <div class="d-flex">
  227.                                 <div class="flex-shrink-0 avatar-sm me-3">
  228.                                     <span class="avatar-title bg-success rounded-circle font-size-16">
  229.                                         <i class="bx bx-badge-check"></i>
  230.                                     </span>
  231.                                 </div>
  232.                                 <div class="flex-grow-1">
  233.                                     <h6 class="mb-1">{% trans %}Your item is shipped{% endtrans %}</h6>
  234.                                     <div class="font-size-13 text-muted">
  235.                                         <p class="mb-1">{% trans %}If several languages coalesce the grammar{% endtrans %}</p>
  236.                                         <p class="mb-0"><i class="mdi mdi-clock-outline"></i> <span>{% trans %}3 min ago{% endtrans %}</span></p>
  237.                                     </div>
  238.                                 </div>
  239.                             </div>
  240.                         </a>
  242.                         <a href="#!" class="text-reset notification-item">
  243.                             <div class="d-flex">
  244.                                 <div class="flex-shrink-0 me-3">
  245.                                     <img src="/images/users/avatar-6.jpg" class="rounded-circle avatar-sm" alt="user-pic">
  246.                                 </div>
  247.                                 <div class="flex-grow-1">
  248.                                     <h6 class="mb-1">{% trans %}Salena Layfield{% endtrans %}</h6>
  249.                                     <div class="font-size-13 text-muted">
  250.                                         <p class="mb-1">{% trans %}As a skeptical Cambridge friend of mine occidental{% endtrans %}.</p>
  251.                                         <p class="mb-0"><i class="mdi mdi-clock-outline"></i> <span>{% trans %}1 hour ago{% endtrans %}</span></p>
  252.                                     </div>
  253.                                 </div>
  254.                             </div>
  255.                         </a>
  256.                     </div>
  257.                     <div class="p-2 border-top d-grid">
  258.                         <a class="btn btn-sm btn-link font-size-14 text-center" href="javascript:void(0)">
  259.                             <i class="mdi mdi-arrow-right-circle me-1"></i> <span>{% trans %}View More{% endtrans %}..</span> 
  260.                         </a>
  261.                     </div>
  262.                 </div>
  263.             </div>
  265.             <div class="dropdown d-inline-block">
  266.                 <button type="button" class="btn header-item right-bar-toggle me-2">
  267.                     <i data-feather="settings" class="icon-lg"></i>
  268.                 </button>
  269.             </div>
  271.             <div class="dropdown d-inline-block">
  272.                 <button type="button" class="btn header-item bg-soft-light border-start border-end" id="page-header-user-dropdown"
  273.                 data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  274.                     <img class="rounded-circle header-profile-user" src="/images/users/avatar-1.jpg"
  275.                         alt="Header Avatar">
  276.                     <span class="d-none d-xl-inline-block ms-1 fw-medium">{% trans %}Shawn L{% endtrans %}</span>
  277.                     <i class="mdi mdi-chevron-down d-none d-xl-inline-block"></i>
  278.                 </button>
  279.                 <div class="dropdown-menu dropdown-menu-end">
  280.                     <!-- item-->
  281.                     <a class="dropdown-item" href="apps-contacts-profile"><i class="mdi mdi-face-profile font-size-16 align-middle me-1"></i> {% trans %}Profile{% endtrans %}</a>
  282.                     <a class="dropdown-item" href="auth-lock-screen"><i class="mdi mdi-lock font-size-16 align-middle me-1"></i> {% trans %}Lock Screen{% endtrans %}</a>
  283.                     <div class="dropdown-divider"></div>
  284.                     <a class="dropdown-item" href="auth-logout"><i class="mdi mdi-logout font-size-16 align-middle me-1"></i> {% trans %}Logout{% endtrans %}</a>
  285.                 </div>
  286.             </div>
  288.         </div>
  289.     </div>
  290. </header>