Merge pull request #45 from Lifeline-Solutions/menu

Added mobile-nav
ger619 · Jul 11, 2023 · 883c347 · 883c347
2 parents c4aa1f2 + 73800f0
commit 883c347
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 59 deletions.
diff --git a/app/controllers/news_controller.rb b/app/controllers/news_controller.rb
@@ -1,7 +1,7 @@
 class NewsController < ApplicationController
   before_action :authenticate_user!, except: %i[index show]
   def index
-    @pagy, @news = pagy_countless(News.all.order('created_at DESC'), items: 10)
+    @pagy, @news = pagy_countless(News.all.order('created_at DESC'), items: 1)
     respond_to do |format|
       format.html
       format.turbo_stream

diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
@@ -80,57 +80,52 @@
 
 
  <!-- Mobile menu -->
-
- <div class="content-end bg-black block md:hidden ">
-   <ul class="flex justify-end gap-5 pt-4 bg-black">
-     <li class="absolute top-0 left-0 ">
-       <a target="_blank" rel="noreferrer" href="https://www.ke.sportpesa.com/en/sports-betting/football-1/">
-         <%= image_tag "logo.png", class: "w-[80px] text-[#F6F6F6]" %>
-       </a>
-     </li>
-     <li id="open" class="grid mr-3">
-       <i class="fa-sharp fa-solid fa-bars fa-flip-horizontal fa-xl mr-3 pb-4" style="color: #ffffff;"></i>
-       <span class="text-white shadow-xl">Menu</span>
-     </li>
-     <li id="close" class="grid mr-3">
-       <i class="fa-sharp fa-solid fa-bars fa-flip-horizontal fa-xl mr-3 pb-4" style="color: #ffffff;"></i>
-       <span class="text-white shadow-xl">X</span>
-     </li>
-
-   </ul>
-
-   <ul class="flex justify-end gap-5 p-2 text-[#F6F6F6] bg-[#f4e721]">
-     <li>
-       <a target="_blank" rel="noreferrer" href="https://www.ke.sportpesa.com/en/sports-betting/football-1/">
-         <%= image_tag "SP_logo-01.png", class: "w-[100px] text-[#F6F6F6]" %>
-       </a>
-     </li>
-     <li>
-       <a target="_blank" rel="noreferrer" href="https://www.ke.sportpesa.com/en/sports-betting/football-1/">
-         <%= image_tag "finix-casino.png", class: "w-[100px] text-[#F6F6F6]" %>
-       </a>
-     </li>
-   </ul>
- </div>
- <script>
-   const menu = document.getElementById('menu');
-   const closeMenu = document.getElementById('close');
-    const openMenu = document.getElementById('open');
-
-   function show() {
-       menu.style.display = 'block';
-       menu.style.top = '0';
-       openMenu.style.display = 'none';
-       closeMenu.style.display = 'block';
-   }
-
-   function close() {
-       closeMenu.style.top = '-100vh';
-       closeMenu.style.display = 'none';
-       openMenu.style.display = 'block';
-   }
-
-   closeMenu.addEventListener('click', close);
-   openMenu.addEventListener('click', show);
-
- </script>
+<div class="content-end bg-black block md:hidden">
+  <ul class="flex justify-end gap-5 pt-4 bg-black">
+    <li class="absolute top-0 left-0">
+      <a target="_blank" rel="noreferrer" href="https://www.ke.sportpesa.com/en/sports-betting/football-1/">
+        <%= image_tag "logo.png", class: "w-[80px] text-[#F6F6F6]" %>
+      </a>
+    </li>
+    <li id="menuToggle" class="grid mt-5 mr-3">
+      <i id="menuIcon" class="fa-sharp fa-solid fa-bars fa-flip-horizontal fa-xl mr-3 pb-4" style="color: #ffffff;"></i>
+    </li>
+  </ul>
+
+  <ul id="menu" class="hidden items-center md:flex gap-5 text-center mt-12 ml-5 pb-5 uppercase">
+    <li class="hover:underline text-[#f4e721] underline-offset-8 hover:text-[#f4e721]">
+      <%= link_to "NEWS", news_index_path %>
+    </li>
+    <li class="hover:underline text-[#f4e721] underline-offset-8 hover:text-[#f4e721]">
+      <%= link_to "TEAM", team_index_path %>
+    </li>
+    <li class="hover:underline text-[#f4e721] underline-offset-8 hover:text-[#f4e721]">
+      <%= link_to "FIXTURES", fixture_index_path %>
+    </li>
+    <li class="hover:underline text-[#f4e721] underline-offset-8 hover:text-[#f4e721]">
+      <%= link_to "MEMBERSHIP", membership_index_path %>
+    </li>
+    <li class="hover:underline text-[#f4e721] underline-offset-8 hover:text-[#f4e721]">
+      <%= link_to "OUR CLUB", club_index_path %>
+    </li>
+    <li class="hover:underline text-[#f4e721] underline-offset-8 hover:text-[#f4e721] ">
+      <%= link_to "SHOP", product_index_path %>
+    </li>
+  </ul>
+</div>
+
+<script>
+  const menuToggle = document.getElementById('menuToggle');
+  const menu = document.getElementById('menu');
+  const menuIcon = document.getElementById('menuIcon');
+
+  menuToggle.addEventListener('click', () => {
+    menu.classList.toggle('hidden');
+    menuIcon.classList.toggle('fa-bars');
+    menuIcon.classList.toggle('fa-times');
+  });
+</script>
+
+
+
+
diff --git a/config/database.yml b/config/database.yml
@@ -20,14 +20,10 @@ default: &default
   # For details on connection pooling, see Rails configuration guide
   # https://guides.rubyonrails.org/configuring.html#database-pooling
   pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
-  username: postgres
-  password: trance
 
 development:
   <<: *default
   database: mseals_development
-  username: postgres
-  password: trance
 
   # The specified database role being used to connect to postgres.
   # To create additional roles in postgres see `$ createuser --help`.