templates/menu.html.twig line 1

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