templates/partials/top-nav.html.twig line 1

Open in your IDE?
  1. <div id="overlay"></div>
  3. <nav class="bg-mid-green fixed-top navbar navbar-dark navbar-expand-xl">
  4.     <div class="container-fluid px-0 px-lg d-flex">
  5.         <div class="col-xxl-1 d-xxl-block d-none"></div>
  6.         <a class="p-2 ps-3 ps-xxl-2 navbar-brand" href="/"> <img src="{{ asset('build/images/fw-thorpe-logo-white.svg') }}" alt="FW Thorpe logo" id="top-fwt-logo"> </a>
  7.         <button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  8.             <span class="navbar-toggler-icon"></span>
  9.         </button>
  10.         <div class="bg-mid-green navbar-collapse collapse" id="navbarSupportedContent">
  11.             <ul class="list-unstyled m-auto mb-2 mb-lg-0 navbar-nav navbar-nav-scroll py-2">
  12.                 <li class="nav-item" id="about-us-menu">
  13.                     <a class="hover-yellow nav-link px-3 py-3 py-xl-2 rounded-0 text-white" id="navbarAbout" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">About
  14.                         <span class="d-inline-block d-xl-none menu-arrow"></span></a>
  15.                     <hr class="d-block d-xl-none m-0">
  16.                     <ul class="bg-mid-green container-fluid dropdown-menu flex-xl-row me-auto px-4 px-xxl-3 py-3 py-xxl-5 rounded-0 sub-menu" aria-labelledby="navbarAbout" data-bs-animation="2s">
  17.                         <li class="col-xxl-1 p-0"></li>
  18.                         <li class="col-xl-2 col-12 mb-0 mb-xxl-4 pe-xl-0 pe-3">
  19.                             <p class="d-xl-block d-none yellow">About FW Thorpe Plc</p>
  20.                             <p class="text-white">We specialise in designing and manufacturing professional lighting equipment.</p>
  21.                         </li>
  22.                         <li class="col-1"></li>
  23.                         <li class="col-xl-1 col-12 d-flex mb-0 mb-xxl-4 pe-xl-0 pe-3">
  24.                             <ul class="list-unstyled top-nav-lists">
  25.                                 <li>
  26.                                     <a href="{{ path('about_route') }}" class="dropdown-item text-white p-1">About</a>
  27.                                 </li>
  28.                                 <li>
  29.                                     <a href="{{ path('about_route') }}#who-are-we" class="dropdown-item text-white p-1" rel="nofollow">Who we are</a>
  30.                                 </li>
  31.                                 <li>
  32.                                     <a href="{{ path('about_route') }}#our-purpose" class="dropdown-item text-white p-1" rel="nofollow">Our Purpose</a>
  33.                                 </li>
  34.                                 <li>
  35.                                     <a href="{{ path('about_route') }}#our-vision" class="dropdown-item text-white p-1" rel="nofollow">Our Vision</a>
  36.                                 </li>
  37.                                 <li>
  38.                                     <a href="{{ path('timeline_route') }}" class="dropdown-item text-white p-1">Our Timeline</a>
  39.                                 </li>
  40.                             </ul>
  41.                         </li>
  42.                         <li class="col-1"></li>
  43.                         <li class="col-xl-2 col-xxl-1 col-12 d-flex mb-0 mb-xxl-4 pe-xl-0 pe-3">
  44.                             <ul class="list-unstyled top-nav-lists">
  45.                                 <li>
  46.                                     <a href="{{ path('board_route') }}" class="dropdown-item text-white p-1">Board of Directors</a>
  47.                                 </li>
  48.                                 <li>
  49.                                     <a href="{{ path('company_information_route') }}" class="dropdown-item text-white p-1">Company Information</a>
  50.                                 </li>
  51.                                 <li>
  52.                                     <a href="{{ path('news_route') }}" class="dropdown-item text-white p-1">Latest News</a>
  53.                                 </li>
  54.                             </ul>
  55.                         </li>
  56.                         <li class="col-xl-1 p-0"></li>
  57.                         <li class="col-11 col-xl-4 col-xxl-3 d-none d-xl-flex bg-dark-green mx-auto mt-4 mt-xl-0 p-4 rounded-3 top-nav-latest-news-box">
  58.                             {% include 'partials/top_nav_latest_news.html.twig' %}
  59.                         </li>
  60.                         <li class="col-xxl-1 p-0"></li>
  61.                         <li>
  62.                             <img class="bottom-0 d-none d-xl-block menu-up-arrow position-absolute" src="{{ asset('build/images/yellow-up-arrow.svg') }}" alt="Up arrow">
  63.                         </li>
  64.                     </ul>
  65.                 </li>
  66.                 <li class="nav-item">
  67.                     <a class="hover-yellow nav-link px-3 py-3 py-xl-2 rounded-0 text-white"
  68.                             id="navbarGroupCompanies" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
  69.                             aria-expanded="false">Group Companies
  70.                         <span class="d-inline-block d-xl-none menu-arrow"></span></a>
  71.                     <hr class="d-block d-xl-none m-0">
  72.                     <ul class="bg-mid-green container-fluid dropdown-menu flex-xl-row me-auto px-4 px-xxl-3 py-3 py-xxl-5 rounded-0 sub-menu" aria-labelledby="navbarGroupCompanies">
  73.                         <li class="col-xxl-1 p-0"></li>
  74.                         <li class="col-xl-2 col-12 mb-0 mb-xxl-4 pe-xl-0 pe-3">
  75.                             <p class="d-xl-block d-none yellow">Group Companies</p>
  76.                             <p class="text-white">We currently employ over 800 people and although each company works autonomously, our skills and markets are complementary.</p>
  77.                         </li>
  78.                         <li class="col-8 col-xl-6 col-xxl-5 d-flex mx-auto">
  79.                             <ul class="d-flex flex-wrap flex-sm-row flex-column justify-content-center list-unstyled text-center" id="menu-company-logo-list">
  80.                                 <li>
  81.                                     <a href="{{ path('thorlux_route') }}" class="dropdown-item">
  82.                                         <img src="{{ asset('build/images/group-logos/thorlux-white.svg') }}" alt="Thorlux Lighting" title="Thorlux Lighting">
  83.                                     </a>
  84.                                 </li>
  85.                                 <li>
  86.                                     <a href="{{ path('philip_payne_route') }}" class="dropdown-item">
  87.                                         <img src="{{ asset('build/images/group-logos/philip-payne-white.svg') }}" alt="Philip Payne" title="Philip Payne">
  88.                                     </a>
  89.                                 </li>
  90.                                 <li>
  91.                                     <a href="{{ path('solite_route') }}" class="dropdown-item">
  92.                                         <img src="{{ asset('build/images/group-logos/solite-white.svg') }}" alt="Solite" title="Solite">
  93.                                     </a>
  94.                                 </li>
  95.                                 <li>
  96.                                     <a href="{{ path('portland_route') }}" class="dropdown-item">
  97.                                         <img src="{{ asset('build/images/group-logos/portland-white.svg') }}" alt="Portland" title="Portland">
  98.                                     </a>
  99.                                 </li>
  100.                                 <li>
  101.                                     <a href="{{ path('portland_traffic_route') }}" class="dropdown-item">
  102.                                         <img src="{{ asset('build/images/group-logos/portland-traffic-white.svg') }}" alt="Portland Traffic" title="Portland Traffic">
  103.                                     </a>
  104.                                 </li>
  105.                                 <li>
  106.                                     <a href="{{ path('trt_route') }}" class="dropdown-item">
  107.                                         <img src="{{ asset('build/images/group-logos/trt-lighting-white.svg') }}" alt="TRT Lighting" title="TRT Lighting">
  108.                                     </a>
  109.                                 </li>
  110.                                 <li>
  111.                                     <a href="{{ path('lightronics_route') }}" class="dropdown-item">
  112.                                         <img src="{{ asset('build/images/group-logos/lightronics-white.svg') }}" alt="Lightronics" title="Lightronics">
  113.                                     </a>
  114.                                 </li>
  115.                                 <li>
  116.                                     <a href="{{ path('famostar_route') }}" class="dropdown-item">
  117.                                         <img src="{{ asset('build/images/group-logos/famostar-white.svg') }}" alt="Famostar" title="Famostar">
  118.                                     </a>
  119.                                 </li>
  120.                                 <li>
  121.                                     <a href="{{ path('zemper_route') }}" class="dropdown-item">
  122.                                         <img src="{{ asset('build/images/group-logos/zemper-white.svg') }}" alt="Zemper" title="Zemper">
  123.                                     </a>
  124.                                 </li>
  125.                                 <li>
  126.                                     <a href="{{ path('ratio_route') }}" class="dropdown-item">
  127.                                         <img src="{{ asset('build/images/group-logos/ratio-white.svg') }}" alt="Ratio" title="Ratio">
  128.                                     </a>
  129.                                 </li>
  130.                                 <li>
  131.                                     <a href="{{ path('schahlled_route') }}" class="dropdown-item">
  132.                                         <img src="{{ asset('build/images/group-logos/schahlled-white.svg') }}" alt="Ratio" title="Ratio">
  133.                                     </a>
  134.                                 </li>
  135.                             </ul>
  136.                         </li>
  137.                         <li class="col-11 col-xl-4 col-xxl-3 d-none d-xl-flex bg-dark-green mx-auto mt-4 mt-xl-0 p-4 rounded-3 top-nav-latest-news-box">
  138.                             {% include 'partials/top_nav_latest_news.html.twig' %}
  139.                         </li>
  140.                         <li class="col-xxl-1"></li>
  141.                         <li>
  142.                             <img class="bottom-0 d-none d-xl-block menu-up-arrow position-absolute" src="{{ asset('build/images/yellow-up-arrow.svg') }}" alt="Up arrow">
  143.                         </li>
  144.                     </ul>
  145.                 </li>
  146.                 <li class="nav-item">
  147.                     <a class="hover-yellow nav-link px-3 py-3 py-xl-2 rounded-0 text-white"
  148.                             id="navbarInvestorRelations" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
  149.                             aria-expanded="false">Investor Relations
  150.                         <span class="d-inline-block d-xl-none menu-arrow"></span></a>
  151.                     <hr class="d-block d-xl-none m-0">
  152.                     <ul class="bg-mid-green container-fluid dropdown-menu flex-xl-row me-auto px-4 px-xxl-3 py-3 py-xxl-5 rounded-0 sub-menu" aria-labelledby="navbarInvestorRelations">
  153.                         <li class="col-xxl-1 p-0"></li>
  154.                         <li class="col-xl-2 col-12 mb-0 mb-xxl-4 pe-xxl-0 pe-3">
  155.                             <p class="d-xl-block d-none yellow">Investor Relations</p>
  156.                             <p class="text-white">The Group management team is passionate about developing the business for the benefit of the shareholders, employees and customers.</p>
  157.                         </li>
  158.                         <li class="col-1"></li>
  159.                         <li class="col-xl-1 col-12 d-flex mb-0 mb-xxl-4 pe-xxl-0 pe-3">
  160.                             <ul class="list-unstyled top-nav-lists">
  161.                                 <li>
  162.                                     <a href="{{ path('rns_route') }}" class="dropdown-item p-1 text-white text-wrap">Regulatory News Service (RNS)</a>
  163.                                 </li>
  164.                                 <li>
  165.                                     <a href="{{ path('share_chart_route') }}" class="dropdown-item text-white p-1">Share Chart</a>
  166.                                 </li>
  167.                                 <li>
  168.                                     <a href="{{ path('share_details_route') }}" class="dropdown-item text-white p-1">Share Details</a>
  169.                                 </li>
  170.                                 <li>
  171.                                     <a href="{{ path('key_figures_route') }}" class="dropdown-item text-white p-1">Key Figures</a>
  172.                                 </li>
  173.                             </ul>
  174.                         </li>
  175.                         <li class="col-1"></li>
  176.                         <li class="col-12 col-xl-2 d-flex mb-0 mb-xxl-4 pe-xxl-0 pe-3">
  177.                             <ul class="list-unstyled top-nav-lists">
  178.                                 <li>
  179.                                     <a href="{{ path('financial_reports_route') }}" class="dropdown-item text-white p-1">Financial Reports</a>
  180.                                 </li>
  181.                                 <li>
  182.                                     <a href="{{ path('financial_calendar_route') }}" class="dropdown-item text-white p-1">Financial Calendar</a>
  183.                                 </li>
  184.                                 <li class="align-items-center d-flex menu-pdf-link">
  185.                                     <a href="/pdf/fwt-circular-2024.pdf" class="dropdown-item text-white p-1" title="PDF">Circular 2024</a>
  186.                                     <span>
  187.                                         <img src="{{ asset('build/images/pdf-icon-white.svg') }}" class="menu-pdf-icon" alt="PDF icon">
  188.                                     </span>
  189.                                 </li>
  190.                                 <li>
  191.                                     <a href="{{ path('business_model_route') }}" class="dropdown-item text-white p-1">Business Model</a>
  192.                                 </li>
  193.                                 <li>
  194.                                     <a href="{{ path('business_strategy_route') }}" class="dropdown-item text-white p-1">Business Strategy</a>
  195.                                 </li>
  196.                             </ul>
  197.                         </li>
  198.                         <li class="col-11 col-xl-4 col-xxl-3 d-none d-xl-flex bg-dark-green mx-auto mt-4 mt-xl-0 p-4 rounded-3 top-nav-latest-news-box">
  199.                             {% include 'partials/top_nav_latest_news.html.twig' %}
  200.                         </li>
  201.                         <li class="col-xxl-1"></li>
  202.                         <li>
  203.                             <img class="bottom-0 d-none d-xl-block menu-up-arrow position-absolute" src="{{ asset('build/images/yellow-up-arrow.svg') }}" alt="Up arrow">
  204.                         </li>
  205.                     </ul>
  206.                 </li>
  207.                 <li class="nav-item">
  208.                     <a class="hover-yellow nav-link px-3 py-3 py-xl-2 rounded-0 text-white"
  209.                             id="navbarCorporateResponsibility" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
  210.                             aria-expanded="false">Corporate Responsibility
  211.                         <span class="d-inline-block d-xl-none menu-arrow"></span></a>
  212.                     <hr class="d-block d-xl-none m-0">
  213.                     <ul class="bg-mid-green container-fluid dropdown-menu flex-xl-row me-auto px-4 px-xxl-3 py-3 py-xxl-5 rounded-0 sub-menu" aria-labelledby="navbarCorporateResponsibility">
  214.                         <li class="col-xxl-1 p-0"></li>
  215.                         <li class="col-xl-2 col-12 mb-0 mb-xxl-4 pe-xxl-0 pe-3">
  216.                             <p class="d-xl-block d-none yellow">Corporate Responsibility</p>
  217.                             <p class="text-white">The Group has the responsibility for managing the challenges that affect the business on a daily basis; this also includes our impact on the environment, our workforce, and the community.</p>
  218.                         </li>
  219.                         <li class="col-1"></li>
  220.                         <li class="col-xl-1 col-12 d-flex mb-0 mb-xxl-4 pe-xxl-0 pe-3">
  221.                             <ul class="list-unstyled top-nav-lists">
  222.                                 <li>
  223.                                     <a href="{{ path('corporate_responsibility_route') }}" class="dropdown-item text-white p-1">Corporate Responsibility</a>
  224.                                 </li>
  225.                                 <li>
  226.                                     <a href="{{ path('carbon_offsetting_route') }}" class="dropdown-item text-white p-1">Carbon Offsetting Project</a>
  227.                                 </li>
  228.                                 <li>
  229.                                     <a href="{{ path('sustainability_route') }}" class="dropdown-item text-white p-1">Sustainability</a>
  230.                                 </li>
  231.                             </ul>
  232.                         <li class="col-1"></li>
  233.                         <li class="col-xl-2 col-12 d-flex mb-0 mb-xxl-4 pe-xxl-0 pe-3">
  234.                             <ul class="list-unstyled top-nav-lists">
  235.                                 <li class="align-items-center d-flex menu-pdf-link" id="principal-risks-link">
  236.                                     <a href="/pdf/fw-thorpe-principal-risks.pdf" class="dropdown-item text-white text-wrap p-1" title="PDF">Principal Risks and Uncertainties</a>
  237.                                     <span>
  238.                                         <img src="{{ asset('build/images/pdf-icon-white.svg') }}" class="menu-pdf-icon" alt="PDF icon">
  239.                                     </span>
  240.                                 </li>
  241.                                 <li>
  242.                                     <a href="{{ path('company_documents_route') }}" class="dropdown-item text-white p-1">Company Documents</a>
  243.                                 </li>
  244.                                 <li>
  245.                                     <a href="{{ path('aim_route') }}" class="dropdown-item text-white p-1">AIM Documents</a>
  246.                                 </li>
  247.                             </ul>
  248.                         </li>
  249.                         <li class="col-11 col-xl-4 col-xxl-3 d-none d-xl-flex bg-dark-green mx-auto mt-4 mt-xl-0 p-4 rounded-3 top-nav-latest-news-box">
  250.                             {% include 'partials/top_nav_latest_news.html.twig' %}
  251.                         </li>
  252.                         <li class="col-xxl-1"></li>
  253.                         <li>
  254.                             <img class="bottom-0 d-none d-xl-block menu-up-arrow position-absolute" src="{{ asset('build/images/yellow-up-arrow.svg') }}" alt="Up arrow">
  255.                         </li>
  256.                     </ul>
  257.                 </li>
  258.                 <li class="nav-item">
  259.                     <a class="hover-yellow nav-link px-3 py-3 py-xl-2 rounded-0 text-white"
  260.                             id="navbarContact" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
  261.                             aria-expanded="false">Contact <span class="d-inline-block d-xl-none menu-arrow"></span></a>
  262.                     <ul class="bg-mid-green container-fluid dropdown-menu flex-xl-row me-auto px-4 px-xxl-3 py-3 py-xxl-5 rounded-0 sub-menu" aria-labelledby="navbarContact" id="contact-sub-menu">
  263.                         <li class="col-xxl-1 p-0"></li>
  264.                         <li class="col-xl-2 col-12 mb-0 mb-xxl-4 pe-xxl-0 pe-3">
  265.                             <p class="d-xl-block d-none yellow">Contact</p>
  266.                             <p class="text-white">We are determined to provide you with the right support and help to deal with your query.</p>
  267.                         </li>
  268.                         <li class="col-1"></li>
  269.                         <li class="col-5 col-xxl-4 d-flex">
  270.                             <ul class="list-unstyled top-nav-lists">
  271.                                 <li>
  272.                                     <a href="{{ path('contact_route') }}" class="dropdown-item text-white p-1">Contact</a>
  273.                                 </li>
  274.                             </ul>
  275.                         </li>
  276.                         <li class="col-11 col-xl-4 col-xxl-3 d-none d-xl-flex bg-dark-green mx-auto mt-4 mt-xl-0 p-4 rounded-3 top-nav-latest-news-box">
  277.                             {% include 'partials/top_nav_latest_news.html.twig' %}
  278.                         </li>
  279.                         <li class="col-xxl-1"></li>
  280.                         <li>
  281.                             <img class="bottom-0 d-none d-xl-block menu-up-arrow position-absolute" src="{{ asset('build/images/yellow-up-arrow.svg') }}" alt="Up arrow">
  282.                         </li>
  283.                     </ul>
  284.                 </li>
  285.             </ul>
  286.             <div class="align-items-center bg-dark-green d-flex p-1 mb-2 mb-xxl-0 me-2 mx-2 mx-xxxl-0 rounded-3" role="search">
  287.                 <p class="mb-0 mx-1 text-white">Current Share Price:</p>
  288.                 <p class="mb-0 mx-1 text-white share-price"></p>
  289.                 <a class="m-1" href="https://www.londonstockexchange.com/stock/TFW/thorpe-f-w-plc/company-page" rel="noopener" target="_blank" title="FW Thorpe Plc at London Stock Exchange - AIM &#10; (opens in a new tab/window)">
  290.                     <img src="{{ asset('build/images/lse-aim.png') }}" alt="LSE AIM icon" class="top-lse-icons"> </a>
  291.                 <a class="m-1" href="https://docs.londonstockexchange.com/sites/default/files/documents/lseg_green_economy_mark_factsheet.pdf" rel="noopener" target="_blank" title="London Stock Exchange: Green Economy Mark Factsheet PDF document &#10; (opens in a new tab/window)">
  292.                     <img src="{{ asset('build/images/lse-green.png') }}" alt="LSE Green icon" class="top-lse-icons">
  293.                 </a>
  294.             </div>
  295.         </div>
  296.         <div class="col-1 d-xxl-block d-none"></div>
  297.     </div>
  298. </nav>