templates/Theme/navbar.html.twig line 1

Open in your IDE?
  1. {% set currentPath = path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) %}
  3. <style>
  4.     .progress {
  5.         width: 45px;
  6.         height: 45px;
  7.         background: none;
  8.         position: relative;
  9.         top: 0px;
  10.         right: 10px;
  11.     }
  13.     .progress::after {
  14.         content: "";
  15.         width: 100%;
  16.         height: 100%;
  17.         border-radius: 50%;
  18.         border: 6px solid #fff;
  19.         position: absolute;
  20.         top: 0;
  21.         left: 0;
  22.     }
  24.     .progress > span {
  25.         width: 50%;
  26.         height: 100%;
  27.         overflow: hidden;
  28.         position: absolute;
  29.         top: 0;
  30.         z-index: 1;
  31.     }
  33.     .progress .progress-left {
  34.         left: 0;
  35.     }
  37.     .progress .progress-bar {
  38.         width: 100%;
  39.         height: 100%;
  40.         background: none;
  41.         border-width: 6px;
  42.         border-style: solid;
  43.         position: absolute;
  44.         top: 0;
  45.         border-color: #db1a21 !important;
  46.     }
  48.     .progress .progress-left .progress-bar {
  49.         left: 100%;
  50.         border-top-right-radius: 80px;
  51.         border-bottom-right-radius: 80px;
  52.         border-left: 0;
  53.         -webkit-transform-origin: center left;
  54.         transform-origin: center left;
  55.     }
  57.     .progress .progress-right {
  58.         right: 0;
  59.     }
  61.     .progress .progress-right .progress-bar {
  62.         left: -100%;
  63.         border-top-left-radius: 80px;
  64.         border-bottom-left-radius: 80px;
  65.         border-right: 0;
  66.         -webkit-transform-origin: center right;
  67.         transform-origin: center right;
  68.     }
  70.     .progress .progress-value {
  71.         position: absolute;
  72.         top: 0;
  73.         left: 0;
  74.     }
  76.     .progress .progress-value .h2 {
  77.         font-size: 11px;
  78.         color: #ffffff;
  79.         margin: 0;
  80.     }
  82.     @media (min-width: 768px) {
  83.         .progress {
  84.             position: absolute;
  85.             top: 10px;
  86.             right: calc(50% - 150px);
  87.         }
  88.     }
  90.     @media (min-width: 992px) {
  91.         .progress {
  92.             position: absolute;
  93.             top: 10px;
  94.             right: calc(30% - 150px);
  95.         }
  96.     }
  98.     @media (min-width: 1200px) {
  99.         .progress {
  100.             position: absolute;
  101.             top: 10px;
  102.             right: calc(30% - 150px);
  103.         }
  104.     }
  106.     @media (min-width: 1400px) {
  107.         .progress {
  108.             position: absolute;
  109.             top: 10px;
  110.             right: calc(23% - 150px);
  111.         }
  112.     }
  113. </style>
  115. <script>
  116.     $(function () {
  118.         $(".progress").each(function () {
  120.             var value = $(this).attr('data-value');
  121.             var left = $(this).find('.progress-left .progress-bar');
  122.             var right = $(this).find('.progress-right .progress-bar');
  124.             if (value > 0) {
  125.                 if (value <= 50) {
  126.                     right.css('transform', 'rotate(' + percentageToDegrees(value) + 'deg)')
  127.                 } else {
  128.                     right.css('transform', 'rotate(180deg)')
  129.                     left.css('transform', 'rotate(' + percentageToDegrees(value - 50) + 'deg)')
  130.                 }
  131.             }
  132.         })
  134.         function percentageToDegrees(percentage) {
  135.             return percentage / 100 * 360
  136.         }
  138.     });
  139. </script>
  142. {% if is_granted('ROLE_INCOMPLETE_USER') and not (currentPath starts with '/express/') and not (currentPath starts with '/login') %}
  143.     {% include 'Theme/_userNavbar.html.twig' %}
  144. {% else %}
  145.     <nav class="navbar navbar-expand-lg sticky-top">
  146.         <div class="container p-0">
  147.             <div class="d-flex container-fluid justify-content-between p-0 position-relative">
  148.             
  149.                 {% if currentPath is same as '/user/' %}
  150.                 <div class="d-md-none">
  151.                         <a class="nav-link d-flex h-100 align-items-center minimize_sidebar d-lg-none">
  152.                             <i class="far fa-bars "></i>
  153.                         </a>
  154.                 </div>
  155.                 {% elseif breadcrumbComplaintExpress is not defined  %}
  156.                 <div class="d-md-none">
  157.                     <a class="nav-link nav-link d-flex h-100 align-items-center" href="{{ returnUrl is defined ? returnUrl : "javascript:customHistoryBack()" }}" id="back">
  158.                         <i class="far fa-angle-left fz-30"></i>
  159.                     </a>
  160.                 </div>
  161.                 {% elseif (app.request.get('_route') in ['express_complaint_register']) or (app.request.query.get('complaint') == 1) %}
  162.                 <div class="d-md-none">
  163.                     <a class="nav-link nav-link d-flex h-100 align-items-center" href="javascript:customHistoryBack()" id="back">
  164.                         <i class="far fa-angle-left fz-30"></i>
  165.                     </a>
  166.                 </div>
  167.                 {% elseif (app.request.get('_route') in ['express_complaint_register']) or (app.request.query.get('complaint') == 1) or (app.user is not null and breadcrumbComplaintExpress is defined and app.request.get('_route') != 'express_complaint_x_identite') %}
  168.                 <div class="d-none">
  169.                     <a class="nav-link nav-link d-flex h-100 align-items-center" href="{{ returnUrl is defined ? returnUrl : "javascript:customHistoryBack()" }}    " id="back">
  170.                         <i class="far fa-angle-left fz-30"></i>
  171.                     </a>
  172.                 </div>
  173.                 {% endif %}
  174.                 <div class="d-none">
  175.                     {% if currentPath starts with '/express/' or (currentPath starts with '/login')%}
  176.                         <a class="nav-link" href="javascript:customHistoryBack()" id="back">
  177.                             <i class="far fa-angle-left "></i>
  178.                         </a>
  179.                     {% endif %}
  180.                 </div>
  181.                     {#        <div> #}
  182.                     {#            {% if is_granted('ROLE_INCOMPLETE_USER') and not (currentPath starts with '/express/') %} #}
  183.                     {#            {% if(currentPath is same as '/user/') %} #}
  184.                     {#                <a class="nav-link minimize_sidebar d-lg-none" href="#"> #}
  185.                     {#                    <i class="far fa-bars "></i> #}
  186.                     {#                </a> #}
  187.                     {#            {% else %} #}
  188.                     {#                <a class="nav-link" href="javascript:customHistoryBack()" id="back" > #}
  189.                     {#                    <i class="far fa-angle-left "></i> #}
  190.                     {#                </a> #}
  191.                     {#            {% endif %} #}
  192.                     {#        </div> #}
  194.                 {% if is_granted('ROLE_INCOMPLETE_USER') and not (currentPath starts with '/express/') and not (currentPath starts with '/login')%}
  195.                     {#            <div class="text-center text-white"> #}
  196.                     {#            <div class="text-center d-none d-lg-block text-white"> #}{#            <div class="text-blue-riposte text-center d-none d-lg-block"> #}
  197.                     <div class="text-blue-riposte text-center d-lg-none d-xl-none d-xxl-none">{{ heading }}
  198.                     </div> 
  199.                 {% else %}
  200.                     <div class="d-flex justify-content-center align-items-center text-center text-white text-mobile"
  201.                          style="color: white;">
  202.                         <div class="d-flex justify-content-center align-items-center text-center text-white text-mobile brand px-3 ms-0">
  203.                             <div>
  204.                                 <img style="height: 60px;" src="{{ asset('/assets/img/svg/riposte_logo.svg') }}">
  205.                             </div>
  206.                         </div>
  207.                     </div>
  208.                     <div class="complaint_cancel ms-md-auto d-flex {{ breadcrumbComplaintExpress is defined and app.request.get('_route') not in ['login', 'login_register', 'express_complaint_register'] ? 'pause' : '' }}">
  209.                         {% if app.user is not null and breadcrumbComplaintExpress is defined %}
  210.                             <button href="{{ path('user_homepage') }}" data-bs-toggle="modal"
  211.                                     data-bs-target="#modalComplaintPause">
  212.                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24"
  213.                                      stroke-width="3" stroke="currentColor" class="w-6 h-6">
  214.                                     <path stroke-linecap="round" stroke-linejoin="round"
  215.                                           d="M15.75 5.25v13.5m-7.5-13.5v13.5"/>
  216.                                 </svg>
  217.                                 <span class="d-none d-md-inline">Pause</span>
  218.                             </button>
  219.                         {% else %}
  220.                             <a href="{{ path(app.user is null ? 'portal' : 'user_homepage') }}">
  221.                                 <img src="{{ asset('assets/img/svg/cancel.svg') }}"/>
  222.                                 <span class="d-none d-md-inline">Quitter</span>
  223.                             </a>
  224.                         {% endif %}
  225.                     </div>
  226.                 {% endif %}
  227.                 <div class="menu-last">
  229.                     {% if is_granted('ROLE_INCOMPLETE_USER') and not (currentPath starts with '/express/') and not (currentPath starts with '/login')%}
  230.                         {% if currentPath is same as '/user/' %}
  231.                             {#                    <a class="nav-link minimize_sidebar d-lg-none"> #}
  232.                             {#                        <i class="far fa-bars "></i> #}
  233.                             {#                    </a> #}
  234.                             <a class="nav-link d-lg-none" href="{{ path('logout') }}" title="Déconnexion"> <i
  235.                                         class="fas fa-sign-out-alt"></i>
  236.                             </a>
  237.                         {% else %}
  238.                             <a class="nav-link d-lg-none" href="{{ path('user_home', {sidebar: 'expanded'}) }}">
  239.                                 <i class="far fa-bars "></i>
  240.                             </a>
  241.                         {% endif %}
  242.                     {% else %}
  244.                         {% if not (currentPath starts with '/express/') and not (currentPath starts with '/login') %}
  245.                             {#                {% if is_granted('ROLE_INCOMPLETE_USER') %} #}
  246.                             {#                    <a class="nav-link" href="{{path('user_home', {sidebar: 'expanded'})}}"> #}
  247.                             {#                    <a class="nav-link minimize_sidebar d-lg-none" href="{{path('user_home', {sidebar: 'expanded'})}}"> #}
  248.                             <a class="nav-link d-lg-none" href="{{ path('user_home', {sidebar: 'expanded'}) }}"> <i
  249.                                         class="far fa-bars "></i>
  250.                             </a>
  251.                             {#                {% endif %} #}
  252.                         {% else %}
  253.                             {% if breadcrumbExpress is defined or breadcrumbComplaintExpress is defined  %}
  254.                                 {% if app.request.get('_route') not in ['login', 'login_register', 'express_complaint_register'] %}
  255.                                 <div class="progress mx-auto ms-3"
  256.                                      data-value="{% if progressValue is defined %}{{ progressValue }}{% endif %}">
  257.                                     <span class="progress-left">
  258.                                         <span class="progress-bar border-primary"></span>
  259.                                     </span>
  260.                                             <span class="progress-right">
  261.                                         <span class="progress-bar border-primary"></span>
  262.                                     </span>
  263.                                     <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
  264.                                         <div class="h2 font-weight-bold">
  265.                                             {% if progressValue is defined %}
  266.                                                 {{ progressValue }}
  267.                                             {% endif %}%
  268.                                         </div>
  269.                                     </div>
  270.                                 </div>
  271.                                 {% endif %}
  272.                             {% endif %}
  273.                         {% endif %}
  274.                     {% endif %}
  275.                 </div>
  276.             </div>
  277.         </div>
  278.         {# Desktop RIGHT Menu Espace Personnel #}
  279.         {# Desktop RIGHT Déconnexion button #}
  280.         {# -> excluded on Express process #}
  281.     </nav>
  282. {% endif %}
  283. {% if not is_granted('ROLE_INCOMPLETE_USER') or (currentPath starts with '/express/') or (currentPath starts with '/login')%}
  284.     <div class="container ">
  285.         <div class="container-fluid">
  286.             <div class="complaint_title text-center {{ currentPath starts with '/express/' ? 'd-flex justify-content-center' : '' }}">
  287.                 
  288.                 {% if breadcrumbComplaintExpress is not defined or app.request.get('_route') in ['express_complaint_x_params', 'express_complaint_x_steal_breaking', 'express_complaint_x_resident_type'] %}
  289.                     <img src="{{ asset('assets/img/svg/pencil.svg') }}"/>
  290.                     Porter plainte
  291.                 {% else %}
  292.                     {{ app.request.session.get('expressComplaintCategoryName', 'Porter plainte') }}
  293.                 {% endif %}
  294.             </div>
  295.         </div>
  296.     </div>
  297. {% endif %}
  298. {% include "Commons/modalComplaintPause.html.twig" %}
  301. <script>
  302.     const lastItemMenu = document.querySelector('.menu-last');
  303.     if (lastItemMenu && lastItemMenu.innerHTML.trim() === '') {
  304.         lastItemMenu.parentElement.removeChild(lastItemMenu);
  305.     }
  306. </script>