templates/menu.html.twig line 1

  1. {% block menu %}
  2.     <style>
  3.         /* screen - main-menu-overlay */
  6.         .overlay-base {
  7.             display: none;
  8.             align-items: center;
  9.             background-color: #00000040;
  10.             justify-content: center;
  11.             min-height: 100vh;
  13.             position: absolute;
  14.             left: 0;
  15.             top: 0;
  16.         }
  18.         .main-menu-overlay {
  19.             /*align-items: flex-start;*/
  20.             background-color: #00000040;
  21.             border: 1px none;
  22.             cursor: pointer;
  23.             display: flex;
  24.             width: 390px;
  25.             min-height: 100vh;
  27.             z-index: 100;
  28.             position: absolute;
  29.             left: 0;
  30.             top: 0;
  31.         }
  35.         .main-menu-overlay .main-menu-overlay-1 {
  36.             align-items: flex-start;
  37.             border-radius: 10px;
  38.             display: flex;
  39.             overflow: hidden;
  40.             width: 390px;
  41.         }
  43.         .main-menu-overlay .overlap-group {
  44.             align-items: flex-start;
  45.             background-color: var(--white);
  46.             border-radius: 6px;
  47.             box-shadow: 0px 6px 13px #00000040;
  48.             display: flex;
  49.             gap: 46px;
  50.             /*height: 844px;*/
  51.             min-width: 327px;
  52.             min-height: 100vh;
  53.             padding: 15px 12px;
  54.         }
  56.         .main-menu-overlay .flex-col {
  57.             align-items: flex-start;
  58.             display: flex;
  59.             flex-direction: column;
  60.             min-height: 294px;
  61.             width: 209px;
  62.         }
  64.         .main-menu-overlay .frame-1 {
  65.             height: 33px;
  66.             width: 36px;
  67.         }
  69.         .main-menu-overlay .cup-of-joenation-logo-2 {
  70.             align-self: flex-end;
  71.             height: 18px;
  72.             margin-top: 1px;
  73.             width: 191px;
  74.         }
  76.         .main-menu-overlay .title {
  77.             letter-spacing: 0;
  78.             line-height: normal;
  79.             margin-left: 18px;
  80.             margin-top: 32px;
  81.             min-height: 30px;
  82.         }
  84.         .main-menu-overlay .project-data {
  85.             letter-spacing: 0;
  86.             line-height: normal;
  87.             margin-left: 20px;
  88.             margin-top: 26px;
  89.             min-height: 24px;
  90.         }
  92.         .main-menu-overlay .link {
  93.             cursor: pointer;
  94.             letter-spacing: 0;
  95.             line-height: normal;
  96.             margin-left: 20px;
  97.             margin-top: 19px;
  98.             min-height: 24px;
  99.         }
  101.         .main-menu-overlay .refill-my-cup {
  102.             cursor: pointer;
  103.             letter-spacing: 0;
  104.             line-height: normal;
  105.             margin-left: 20px;
  106.             margin-top: 20px;
  107.             min-height: 24px;
  108.         }
  110.         .main-menu-overlay .icon-close {
  111.             cursor: pointer;
  112.             height: 31px;
  113.             margin-top: 28px;
  114.             width: 31px;
  115.         }
  117.         .main-menu-title {
  118.             letter-spacing: 0;
  119.             line-height: normal;
  120.             margin-left: 18px;
  121.             margin-top: 32px;
  122.             min-height: 30px;
  123.             color: var(--mariner);
  124.             font-family: var(--font-family-trade_gothic_lt_std-bold);
  125.             font-size: var(--font-size-xxxl);
  126.             font-style: normal;
  127.             font-weight: 700;
  128.         }
  130.         .main-menu a {
  131.             text-decoration: none;
  132.         }
  134.         .main-menu-subtitle {
  135.             letter-spacing: 0;
  136.             line-height: normal;
  137.             margin-left: 20px;
  138.             margin-top: 26px;
  139.             min-height: 24px;
  140.             color: var(--downriver);
  141.             font-family: var(--font-family-trade_gothic_lt_std-bold);
  142.             font-size: var(--font-size-xxl);
  143.             font-style: normal;
  144.             font-weight: 700;
  146.         }
  148.         .main-menu-img {
  149.             align-self: flex-end;
  150.             height: 18px;
  151.             margin-top: 35px;
  152.             width: 191px;
  153.         }
  155.         .staging-text {
  156.             font-size: 18px;
  157.             line-height: 22px;
  158.             color: white;
  159.             background: var(--guardsman-red);
  160.             text-transform: uppercase;
  161.             text-align: center;
  162.             position: absolute;
  163.             height: 22px;
  164.             width: 100%;
  165.             z-index: 9999;
  166.         }
  168.     </style>
  169.     <div class="staging-text">
  170.         staging area
  171.     </div>
  172.     <nav class="navbar navbar-items col-12">
  173.         <div class="navbar-menu col-2">
  174.             <div class="col">
  175.                 <a href="javascript:void(0);" onclick="toggleMenu()">
  176.                     <img class="navbar-button-menu"
  177.                          src="{{ asset('assets/img/menu-icon.svg') }}"
  178.                          alt="menu"/>
  179.                 </a>
  180.             </div>
  181.         </div>
  182.         <div class="navbar-logo col">
  183.             <a href="{{ path('app_home') }}">
  184.                 <img class="navbar-logo-img" src="{{ asset('assets/img/cupofjoenation-logo-2-1.svg') }}"
  185.                      alt="cupOfJoenation-logo 2"/>
  186.             </a>
  187.         </div>
  188.     </nav>
  189.     <div id="overlay-main-menu-overlay" class="overlay-base">
  190.         <div class="main-menu-overlay screen">
  191.             <div class="main-menu-overlay-1">
  192.                 <div class="overlap-group">
  193.                     <div class="flex-col main-menu">
  194.                         <img class="main-menu-img" src="{{ asset('assets/img/cupofjoenation-logo-2-10.svg') }}"
  195.                              alt="Frame 1">
  196.                         <a href="{{ path('app_home') }}">
  197.                             <div class="main-menu-subtitle">Make a Joenation</div>
  198.                         </a>
  199.                         <a href="{{ path('app_donation_update') }}" >
  200.                             <div class="main-menu-subtitle">Change Joenation Level</div>
  201.                         </a>
  202.                         <a href="{{ path('app_balance_index') }}" onclick="">
  203.                             <div class="main-menu-subtitle">Refill My Cup</div>
  204.                         </a>
  205.                         <a href="{{ path('app_account') }}">
  206.                             <div class="main-menu-subtitle">My Account</div>
  207.                         </a>
  208.                         <a href="{{ path('app_feedback') }}">
  209.                             <div class="main-menu-subtitle">Feedback</div>
  210.                         </a>
  211.                         <a href="{{ path('app_report') }}">
  212.                             <div class="main-menu-subtitle">Project Data</div>
  213.                         </a>
  214.                         <a href="{{ path('app_logout') }}" onclick="">
  215.                             <div class="main-menu-subtitle">Log Out</div>
  216.                         </a>
  217.                     </div>
  218.                     <a href="#" id="menu-close"><img class="icon-close"
  219.                                                            src="{{ asset('assets/img/---icon--x-circle-@2x.png') }}"
  220.                                                            alt="icon-close">
  221.                     </a>
  222.                 </div>
  223.             </div>
  224.         </div>
  225.     </div>
  227. {% endblock %}