templates/app/menus.html.twig line 1

Open in your IDE?
  1. {% set current = app.request.attributes.get('_route') %}
  3. {# Styles du nouveau menu #}
  4. {% block stylesheets %}
  5.   <style>
  6.     :root {
  7.       --primary: #3D7299;
  8.       --secondary: #a4286d;
  9.     }
  11.     *, ::before, ::after {
  12.       box-sizing: inherit;
  13.     }
  15.     #navbar-container {
  16.       bottom: 0;
  17.       align-items: center;
  18.       display: flex;
  19.       height: 100vh;
  20.       justify-content: center;
  21.       left: 0;
  22.       padding: 3rem 3rem;
  23.       position: fixed;
  24.       width: 330px;
  25.     }
  27.     #navbar {
  28.       background: #fff;
  29.       border-radius: 20px;
  30.       box-shadow: 15px 15px 10px #00000029;
  31.       display: flex;
  32.       flex-direction: column;
  33.       height: 100%;
  34.       align-items: center;
  35.       color: var(--primary);
  36.       width: 100%;
  37.     }
  39.     header {
  40.       align-items: center;
  41.       display: flex;
  42.       padding: 1.5rem 2rem;
  43.       width: 100%;
  44.     }
  46.     header svg {
  47.       fill: var(--primary);
  48.     }
  50.     header #header-title {
  51.       display: flex;
  52.       flex-direction: column;
  53.       height: 100%;
  54.       justify-content: center;
  55.       margin-left: 1rem;
  56.       position: relative;
  57.     }
  59.     header #header-title #hello {
  60.       font-size: 1.6em;
  61.       font-weight: 400;
  62.     }
  64.     header #header-title #app-version {
  65.       bottom: -5px;
  66.       font-size: .9em;
  67.       font-weight: 100;
  68.       left: 0;
  69.       position: absolute;
  70.     }
  72.     .nav {
  73.       height: 100%;
  74.       padding: 2rem 0;
  75.       width: 100%;
  76.     }
  78.     .nav ul {
  79.       list-style: none;
  80.       display: flex;
  81.       flex-direction: column;
  82.       height: 100%;
  83.       margin: 0;
  84.       padding: 0;
  85.     }
  87.     #nav-item-end {
  88.       margin-top: auto;
  89.     }
  91.     .nav li {
  92.       display: flex;
  93.       flex-direction: column;
  94.       padding: .2rem 2rem;
  95.     }
  97.     .nav li:hover .link-bottom {
  98.       background: var(--secondary);
  99.       width: 100%;
  100.     }
  102.     .nav li .link-bottom {
  103.       background: var(--primary);
  104.       border-radius: 6px;
  105.       height: .2rem;
  106.       transition: .2s linear;
  107.       width: 0;
  108.     }
  110.     .nav li .nav-link {
  111.       color: var(--primary);
  112.       display: flex;
  113.       align-items: center;
  114.       width: 100%;
  115.     }
  117.     .nav li .icon-container {
  118.       align-items: center;
  119.       display: flex;
  120.       height: 50px;
  121.       justify-content: center;
  122.       width: 50px;
  123.     }
  125.     .nav li .nav-icon {
  126.       align-items: center;
  127.       color: var(--primary);
  128.       display: flex;
  129.       font-size: 2.25em;
  130.       justify-content: center;
  131.     }
  133.     .nav li .nav-link-content {
  134.       display: flex;
  135.       align-items: center;
  136.     }
  138.     .nav li .nav-link-content .link-text {
  139.       font-size: 1.1em;
  140.       font-weight: 500;
  141.       margin-left: 1rem;
  142.     }
  144.     .nav li .router-link-active + .link-bottom {
  145.       width: 100%;
  146.     }
  148.     .nav li .router-link-active + .link-bottom:hover {
  149.       color: #065580;
  150.       font-weight: 400;
  151.     }
  152.   </style>
  153. {% endblock %}
  155. {% if (is_granted('ROLE_SURVEY')) %}
  157.   {% if app.user.hasGroup('GROUP_LANDLORD') %}
  158.     {% set hasAdministrativeInterface = app.user.organization.isAdminInterfaceVisible %}
  159.     {% set hasPrivateMessage = app.user.organization.hasPrivateMessage %}
  160.     {% set isManager = app.user.isManager %}
  161.     {% set hasIncident = false %}
  162.     {% set hasSocialAd = false %}
  163.     {% set batiConnect = app.user.organization.corporateName | lower == "noralsy" %}
  164.   {% elseif  app.user.hasGroup('GROUP_RESIDENT') %}
  165.     {% set isManager = false %}
  166.     {% set hasAdministrativeInterface = app.user.organization.isAdminInterfaceVisible %}
  167.     {% set hasPrivateMessage = app.user.apartment.entrance.residence.hasPrivateMessage %}
  168.     {% set hasIncident = app.user.apartment.entrance.residence.hasIncident %}
  169.     {% set hasSocialAd = app.user.apartment.entrance.residence.hasSocialAd %}
  170.     {% set batiConnect = false %}
  171.   {% elseif  app.user.hasGroup('GROUP_ADMIN') %}
  172.     {% set hasPrivateMessage = false %}
  173.     {% set hasIncident = false %}
  174.     {% set hasSocialAd = false %}
  175.     {% set isManager = app.user.isManager %}
  176.     {% set batiConnect = false %}
  177.   {% endif %}
  179.   <div id="navbar-container">
  180.     <div id="navbar">
  182.       <header>
  183.         <svg xmlns="http://www.w3.org/2000/svg"
  184.           width="50"
  185.           height="50"
  186.           viewBox="0 0 100 100"
  187.           role="presentation">
  188.           <title id="logo-oecko" lang="en">oecko icon</title>
  189.           <g>
  190.             <path d="M49.52,45.77a3,3,0,1,0,4.29.34,3.05,3.05,0,0,0-4.29-.34Z"/>
  191.             <path d="M74.11,32.28,60.72,73.53a3.48,3.48,0,0,1-6.62,0L47.84,54a3.44,3.44,0,0,0-1.94-2.13L26.66,43.5a3.48,3.48,0,0,1,.66-6.6l42.75-9.1a3.49,3.49,0,0,1,4,4.48ZM40.41,54.36a3,3,0,1,1-.34,4.29,3,3,0,0,1,.34-4.29Zm5.41,13.77L27,72.68a1.55,1.55,0,0,1-1.85-1.94l5.44-18.43a1.54,1.54,0,0,1,2.93-.07l3,8.59a1.54,1.54,0,0,0,.88.92L46,65.2a1.54,1.54,0,0,1-.22,2.93Zm3.44-64A46.5,46.5,0,1,0,95.92,50.45,46.49,46.49,0,0,0,49.26,4.12Z"/>
  192.           </g>
  193.         </svg>
  194.         <div id="header-title">
  195.           <span id="hello">OECKO</span>
  196.           <span id="app-version">βeta</span>
  197.         </div>
  198.       </header>
  200.       <div class="nav">
  201.         <ul>
  202.           <li>
  203.             <a href="{{ path('front_homepage', { _locale: app.request.locale }) }}" class="nav-link {{ current == 'front_homepage' ? "router-link-active" }}">
  204.               <span class="nav-link-content">
  205.                 <div class="icon-container">
  206.                   <span class="material-symbols-outlined nav-icon">home</span>
  207.                 </div>
  208.                 <span class="link-text">{{ 'navbar.home' | trans }}</span>
  209.               </span>
  210.             </a>
  211.             <div class="link-bottom"></div>
  212.           </li>
  213.           {% if (is_granted('ROLE_READ_MESSAGE')) and hasPrivateMessage %}
  214.             <li>
  215.               <a href="{{ path('app_privatemessage_showmessages', { _locale: app.request.locale }) }}" class="nav-link {{ current == 'app_privatemessage_showmessages' ? "router-link-active" }}">
  216.                 <span class="nav-link-content">
  217.                   <div class="icon-container">
  218.                     <span class="material-symbols-outlined nav-icon">message</span>
  219.                   </div>
  220.                   <span class="link-text">{{ 'navbar.messaging' | trans }}</span>
  221.                 </span>
  222.               </a>
  223.               <div class="link-bottom"></div>
  224.             </li>
  225.           {% endif %}
  226.           {% if (is_granted('ROLE_PUBLICMESSAGE')) %}
  227.             <li>
  228.               <a href="{{ path('app_publication_publicationsindex', { _locale: app.request.locale }) }}" class="nav-link {{ current == 'app_publication_publicationsindex' ? "router-link-active" }}">
  229.                 <span class="nav-link-content">
  230.                   <div class="icon-container">
  231.                     <span class="material-symbols-outlined nav-icon">document_scanner</span>
  232.                   </div>
  233.                   <span class="link-text">{{ 'navbar.publications' | trans }}</span>
  234.                 </span>
  235.               </a>
  236.               <div class="link-bottom"></div>
  237.             </li>
  238.           {% endif %}
  239.           {% if (is_granted('ROLE_MODERATOR')) %}
  240.             <li>
  241.               <a href="{{ path('app_moderation_moderation', { _locale: app.request.locale }) }}" class="nav-link {{ current == 'app_moderation_moderation' ? "router-link-active" }}">
  242.                 <span class="nav-link-content">
  243.                   <div class="icon-container">
  244.                     <span class="material-symbols-outlined nav-icon">remove_red_eye</span>
  245.                   </div>
  246.                   <span class="link-text">{{ 'navbar.moderation' | trans }}</span>
  247.                 </span>
  248.               </a>
  249.               <div class="link-bottom"></div>
  250.             </li>
  251.           {% endif %}
  252.           <li>
  253.             <a href="{{ nuxtAppUrl }}/{{ app.request.locale }}/surveys" class="nav-link">
  254.               <span class="nav-link-content">
  255.                 <div class="icon-container">
  256.                   <span class="material-symbols-outlined nav-icon">add_chart</span>
  257.                 </div>
  258.                 <span class="link-text">{{ 'navbar.surveys' | trans }}</span>
  259.               </span>
  260.             </a>
  261.             <div class="link-bottom"></div>
  262.           </li>
  263.           {% if (is_granted('ROLE_USEFULCONTACT_MANAGER')) %}
  264.             <li>
  265.               <a href="{{ path('app_contact_contactmanagement', { _locale: app.request.locale }) }}" class="nav-link {{ current == 'app_contact_contactmanagement' ? "router-link-active" }}">
  266.                 <span class="nav-link-content">
  267.                   <div class="icon-container">
  268.                     <span class="material-symbols-outlined nav-icon">phone_in_talk</span>
  269.                   </div>
  270.                   <span class="link-text">{{ 'navbar.contacts' | trans }}</span>
  271.                 </span>
  272.               </a>
  273.               <div class="link-bottom"></div>
  274.             </li>
  275.           {% endif %}
  276.           {% if is_granted('ROLE_EDIT_RESIDENCE') %}
  277.             <li>
  278.               <a href="{{ path('app_manageproperties_manageproperties', { _locale: app.request.locale }) }}" class="nav-link {{ current == 'app_manageproperties_manageproperties' ? "router-link-active" }}">
  279.                 <span class="nav-link-content">
  280.                   <div class="icon-container">
  281.                     <span class="material-symbols-outlined nav-icon">apartment</span>
  282.                   </div>
  283.                   <span class="link-text">{{ 'navbar.residences' | trans }}</span>
  284.                 </span>
  285.               </a>
  286.               <div class="link-bottom"></div>
  287.             </li>
  288.           {% endif %}
  289.           {% if isManager %}
  290.             <li>
  291.               <a href="{{ path('app_manageaccounts_manageaccounts', { _locale: app.request.locale }) }}" class="nav-link {{ current == 'app_manageaccounts_manageaccounts' ? "router-link-active" }}">
  292.                 <span class="nav-link-content">
  293.                   <div class="icon-container">
  294.                     <span class="material-symbols-outlined nav-icon">supervised_user_circle</span>
  295.                   </div>
  296.                   <span class="link-text">{{ 'navbar.accounts' | trans }}</span>
  297.                 </span>
  298.               </a>
  299.               <div class="link-bottom"></div>
  300.             </li>
  301.           {% endif %}
  302.           <li id="nav-item-end">
  303.             <a href="{{ path('app_logout', { _locale: app.request.locale }) }}" class="nav-link">
  304.               <span class="nav-link-content">
  305.                 <div class="icon-container">
  306.                   <span class="material-symbols-outlined nav-icon">logout</span>
  307.                 </div>
  308.                 <span class="link-text">{{ 'navbar.logout' | trans }}</span>
  309.               </span>
  310.             </a>
  311.             <div class="link-bottom"></div>
  312.           </li>
  313.         </ul>
  314.       </div>
  316.     </div>
  317.   </div>
  318. {% else %}
  319.   <a href="#" id="menu-slide-out-btn" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
  320.   <ul style="height: 100%" id="slide-out" class="side-nav fixed">
  322.     <div id="navbar-header">
  324.       {% set home_url = absolute_url(path('front_homepage')) %}
  325.       {% if app.user %}
  326.         {% if app.user.hasGroup('GROUP_ADMIN') or not app.user.organization.activeInterface or app.user.organization.corporateLogoName == null %}
  327.           <img
  328.             src="{{ asset('app/img/oecko-round-icon.png') }}"
  329.             onclick="document.location.href='{{ home_url }}'"
  330.             alt="Logo Oecko"
  331.           />
  332.           <div id="oecko-clock" class="hide-on-small-only"></div>
  333.         {% else %}
  334.           <img
  335.               id="orga-logo"
  336.               src="{{ medias.getServerUrl(app.user.organization.corporateLogoStorageName) }}"
  337.               onclick="document.location.href='{{ home_url }}'"
  338.               alt="Logo Oecko"/>
  339.           <div id="oecko-clock" class="hide-on-small-only"></div>
  340.         {% endif %}
  341.       {% endif %}
  342.     </div>
  343.     <div id="navbar-scroll-container">
  345.       {% if app.user %}
  346.         {% if app.user.hasGroup('GROUP_LANDLORD') %}
  347.           {% set hasAdministrativeInterface = app.user.organization.isAdminInterfaceVisible %}
  348.           {% set hasPrivateMessage = app.user.organization.hasPrivateMessage %}
  349.           {% set isManager = app.user.isManager %}
  350.           {% set hasIncident = false %}
  351.           {% set hasSocialAd = false %}
  352.           {% set batiConnect = app.user.organization.corporateName | lower == "noralsy" %}
  353.         {% elseif  app.user.hasGroup('GROUP_RESIDENT') %}
  354.           {% set isManager = false %}
  355.           {% set hasAdministrativeInterface = app.user.organization.isAdminInterfaceVisible %}
  356.           {% set hasPrivateMessage = app.user.apartment.entrance.residence.hasPrivateMessage %}
  357.           {% set hasIncident = app.user.apartment.entrance.residence.hasIncident %}
  358.           {% set hasSocialAd = app.user.apartment.entrance.residence.hasSocialAd %}
  359.           {% set batiConnect = false %}
  360.         {% elseif  app.user.hasGroup('GROUP_ADMIN') %}
  361.           {% set hasPrivateMessage = false %}
  362.           {% set hasIncident = false %}
  363.           {% set hasSocialAd = false %}
  364.           {% set isManager = app.user.isManager %}
  365.           {% set batiConnect = false %}
  366.         {% endif %}
  368.         {% if (is_granted('ROLE_READ_MESSAGE')) and hasPrivateMessage %}
  369.           <li>
  370.             {% if app.user.getUnreadMessageNumber() > 0  and app.user.getUnreadMessageNumber()<100 %}
  371.               <div class='pastille'>{{ app.user.getUnreadMessageNumber() }}</div>
  372.             {% elseif app.user.getUnreadMessageNumber()>=100 %}
  373.               <div class='pastille'>99+</div>
  374.             {% endif %}
  375.             <a class="waves-effect waves-light tooltipped {{ current == 'app_privatemessage_showmessages' ? "active" }}"
  376.               href="{{ path('app_privatemessage_showmessages', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50" data-tooltip="Messages">
  377.               <i class="fa fa-envelope"></i>
  378.             </a>
  380.           </li>
  381.         {% endif %}
  383.         {% if (is_granted('ROLE_PUBLICMESSAGE')) %}
  384.           <li>
  385.             <a class="waves-effect waves-light tooltipped {{ current == 'app_publication_publicationsindex' ? "active" }}"
  386.               href="{{ path('app_publication_publicationsindex', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50"
  387.               data-tooltip="Gérer les publications">
  388.               <i class="fa fa-pencil-square-o"></i>
  389.             </a>
  390.           </li>
  391.         {% endif %}
  393.         {% if (is_granted('ROLE_SURVEY')) %}
  394.           <li>
  395.             <a class="waves-effect waves-light tooltipped"
  396.               href="{{ nuxtAppUrl }}/{{ app.request.locale }}/surveys" data-position="right" data-delay="50"
  397.               data-tooltip="Gérer les enquêtes">
  398.               <i class="fa fa-question"></i>
  399.             </a>
  400.           </li>
  401.         {% endif %}
  402.         {% if (is_granted('ROLE_MODERATOR')) %}
  403.           <li>
  404.             <a class="waves-effect waves-light tooltipped {{ current == 'app_moderation_moderation' ? "active" }}"
  405.               href="{{ path('app_moderation_moderation', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50"
  406.               data-tooltip="Espace de modération">
  407.               <i class="fa fa-eye-slash"></i>
  408.             </a>
  409.           </li>
  410.         {% endif %}
  412.         {% if isManager %}
  413.           <li>
  414.             <a class="waves-effect waves-light tooltipped {{ current == 'app_manageaccounts_manageaccounts' ? "active" }}"
  415.               href="{{ path('app_manageaccounts_manageaccounts', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50"
  416.               data-tooltip="Gestion des comptes">
  417.               <i class="fa fa-users"></i>
  418.             </a>
  419.           </li>
  420.         {% endif %}
  422.         {% if is_granted('ROLE_EDIT_RESIDENCE') %}
  423.           <li>
  424.             <a class="waves-effect waves-light tooltipped {{ current == 'app_manageproperties_manageproperties' ? "active" }}"
  425.               href="{{ path('app_manageproperties_manageproperties', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50"
  426.               data-tooltip="Gestion des résidences">
  427.               <i class="fa fa-building-o"></i>
  428.             </a>
  429.           </li>
  430.         {% endif %}
  432.         {% if is_granted('ROLE_USEFULCONTACT_MANAGER') %}
  433.           <li>
  434.             <a class="waves-effect waves-light tooltipped {{ current == 'app_contact_contactmanagement' ? "active" }}"
  435.               href="{{ path('app_contact_contactmanagement', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50"
  436.               data-tooltip="Gestion des résidences">
  437.               <i class="fa fa-phone"></i>
  438.             </a>
  439.           </li>
  440.         {% endif %}
  442.         {% if is_granted('ROLE_MANAGE_THINCLIENT') %}
  443.           <li>
  444.             <a class="waves-effect waves-light tooltipped {{ current == 'app_defaultback_managethinclients' ? "active" }}"
  445.               href="{{ path('app_defaultback_managethinclients', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50"
  446.               data-tooltip="Gestion des écrans">
  447.               <i class="fa fa-tablet"></i>
  448.             </a>
  449.           </li>
  450.         {% endif %}
  452.         {% if is_granted('ROLE_MANAGE_THINCLIENT') %}
  453.           <li>
  454.             <a class="waves-effect waves-light tooltipped {{ current == 'app_defaultback_managethinclients_v2' ? "active" }}"
  455.               href="{{ nuxtAppUrl }}/{{ app.request.locale }}/park" data-position="right" data-delay="50"
  456.               data-tooltip="Gestion des écrans V2">
  457.               V2
  458.             </a>
  459.           </li>
  460.         {% endif %}
  462.         {% if is_granted('ROLE_REPORT_INCIDENT') and hasIncident %}
  463.           <li>
  464.             <a class="waves-effect waves-light tooltipped {{ current == 'app_incident_reportincident' ? "active" }}"
  465.               href="{{ path('app_incident_reportincident', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50"
  466.               data-tooltip="Déclarer un incident">
  467.               <i class="fa fa-bullhorn"></i>
  468.             </a>
  469.           </li>
  470.         {% endif %}
  472.         {% if is_granted('ROLE_SOCIALAD') and hasSocialAd %}
  473.           <li>
  474.             <a class="waves-effect waves-light tooltipped {{ current == 'app_socialad_socialads' ? "active" }}"
  475.               href="{{ path('app_socialad_socialads', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50" data-tooltip="Lien social">
  476.               <i class="fa fa-group"></i>
  477.             </a>
  478.           </li>
  479.         {% endif %}
  481.         {% if hasAdministrativeInterface is defined and hasAdministrativeInterface == true and app.user.hasGroup('GROUP_RESIDENT') %}
  482.           <li>
  483.             <a class="waves-effect waves-light tooltipped {{ current == 'app_documents_documents' ? "active" }}"
  484.               href="{{ path('app_documents_documents', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50" data-tooltip="Lien social">
  485.               <i class="menu-icon material-icons">attach_file</i>
  486.             </a>
  487.           </li>
  488.         {% endif %}
  490.         {% if is_granted('ROLE_SOCIALAD') and hasSocialAd %}
  491.           <li>
  492.             <a class="waves-effect waves-light tooltipped {{ current == 'app_contact_contact' ? "active" }}"
  493.               href="{{ path('app_contact_contact', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50" data-tooltip="Contact">
  494.               <i class="menu-icon material-icons">local_phone </i>
  495.             </a>
  496.           </li>
  497.         {% endif %}
  499.         {% if (is_granted('ROLE_ADD_ADMIN')) %}
  500.           <li>
  501.             <a class="waves-effect waves-light tooltipped {{ current == 'app_managefeatures_managefeaturesindex' ? "active" }}"
  502.               href="{{ path('app_managefeatures_managefeaturesindex', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50"
  503.               data-tooltip="Gestion des fonctionnalités Oecko">
  504.               <i class="fa fa-sliders"></i>
  505.             </a>
  506.           </li>
  508.           <li>
  509.             <a class="waves-effect waves-light tooltipped {{ current == 'app_appsettings_appsettings' ? "active" }}"
  510.               href="{{ path('app_appsettings_appsettings', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50"
  511.               data-tooltip="Paramètres généraux">
  512.               <i class="fa fa-cogs"></i>
  513.             </a>
  514.           </li>
  516.         {% endif %}
  518.     {% if (batiConnect) %}
  519.       <li>
  520.         <a class="baticonnect"
  521.            href="https://www.baticonnect.com/index.php" data-position="right" data-delay="50"
  522.            data-tooltip="Gestion administrative">
  523.            <img
  524.             src="{{ asset('app/img/baticonnect.png') }}"
  525.             alt="Logo Baticonnect"
  526.           />
  527.         </a>
  528.       </li>
  529.     {% endif %}
  531.         <li>
  532.           <a class="waves-effect waves-light tooltipped"
  533.             href="{{ path('app_logout', { _locale:  app.request.locale }) }}" data-position="right" data-delay="50"
  534.             data-tooltip="Se déconnecter">
  535.             <i class="fa fa-sign-out"></i>
  536.           </a>
  537.         </li>
  539.       {% else %}
  540.         <li>
  541.           <a class="waves-effect waves-light tooltipped {{ current == 'app_login' ? "active" }}"
  542.             href="#" data-position="right" data-delay="50"
  543.             data-tooltip="S'identifier">
  544.             <i class="fa fa-lock"></i>
  545.           </a>
  546.         </li>
  548.         <li>
  549.           <a class="waves-effect waves-light tooltipped {{ current == '#' ? "active" }}"
  550.             href="https://oecko.com" data-position="right" data-delay="50" data-tooltip="Découvrez l'application OECKO">
  551.             <i class="fa fa-info-circle"></i>
  552.           </a>
  553.         </li>
  555.       {% endif %}
  557.       <div class="clearer"></div>
  558.     </div>
  559.   </ul>
  560. {% endif %}