diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 255a3f2..248d897 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -5,9 +5,10 @@ module ApplicationHelper def main_nav_class(current_section, link_to_section) if current_section == link_to_section - "bg-gray-900/50 text-white px-3 py-2 rounded-md text-sm font-medium" + "bg-gray-900/50 text-white px-3 py-2 rounded-md font-medium text-base md:text-sm block md:inline-block" else - "text-gray-300 hover:bg-gray-900/30 hover:text-white px-3 py-2 rounded-md text-sm font-medium" + "text-gray-300 hover:bg-gray-900/30 hover:text-white active:bg-gray-900/30 active:text-white px-3 py-2 rounded-md font-medium text-base md:text-sm block md:inline-block" end end end + diff --git a/app/javascript/controllers/topbar_controller.js b/app/javascript/controllers/topbar_controller.js new file mode 100644 index 0000000..a3e74d5 --- /dev/null +++ b/app/javascript/controllers/topbar_controller.js @@ -0,0 +1,31 @@ +import { Controller } from "@hotwired/stimulus" + +function show (element) { + element.classList.add('block'); + element.classList.remove('hidden'); +} + +function hide (element) { + element.classList.remove('block'); + element.classList.add('hidden'); +} + +export default class extends Controller { + static targets = [ 'mobileMenu', 'iconMobileMenuOpen', 'iconMobileMenuClose' ]; + + connect() { + this.mobileMenuTarget.classList.add('hidden'); + } + + toggleMobileNav() { + if (this.mobileMenuTarget.classList.contains('hidden')) { + show(this.mobileMenuTarget); + show(this.iconMobileMenuCloseTarget); + hide(this.iconMobileMenuOpenTarget); + } else { + hide(this.mobileMenuTarget); + hide(this.iconMobileMenuCloseTarget); + show(this.iconMobileMenuOpenTarget); + } + } +} diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb index e983205..0141516 100644 --- a/app/views/layouts/admin.html.erb +++ b/app/views/layouts/admin.html.erb @@ -12,16 +12,15 @@
-