app.blade.php 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. {{-- api-v12/resources/views/library/layouts/app.blade.php --}}
  2. <!doctype html>
  3. <html lang="zh">
  4. <head>
  5. <meta charset="utf-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8. <title>@yield('title', '巴利书库')</title>
  9. @stack('styles')
  10. @vite(['resources/css/main.css', 'resources/js/app.js'])
  11. </head>
  12. <body>
  13. <div class="page">
  14. <div class="hero-wrapper">
  15. <x-library.header />
  16. @yield('hero')
  17. </div>
  18. <div class="page-wrapper">
  19. @yield('content')
  20. </div>
  21. </div>
  22. <script>
  23. // Hamburger Menu Toggle
  24. (function() {
  25. const btn = document.getElementById('bcHamburger');
  26. const overlay = document.getElementById('bcOverlay');
  27. const drawer = document.getElementById('bcDrawer');
  28. const close = document.getElementById('bcDrawerClose');
  29. if (!btn) return;
  30. function open() {
  31. drawer.classList.add('open');
  32. overlay.classList.add('open');
  33. }
  34. function shut() {
  35. drawer.classList.remove('open');
  36. overlay.classList.remove('open');
  37. }
  38. btn.addEventListener('click', open);
  39. overlay.addEventListener('click', shut);
  40. close.addEventListener('click', shut);
  41. drawer.querySelectorAll('a').forEach(a => {
  42. a.addEventListener('click', shut);
  43. });
  44. })();
  45. const mobileOverlay = document.getElementById('mobileOverlay');
  46. function toggleMenu() {
  47. mobileMenu.classList.toggle('active');
  48. mobileOverlay.classList.toggle('active');
  49. hamburgerBtn.classList.toggle('active');
  50. }
  51. hamburgerBtn.addEventListener('click', toggleMenu);
  52. mobileOverlay.addEventListener('click', toggleMenu);
  53. // Close menu when clicking on a link
  54. document.querySelectorAll('.mobile-nav-item a').forEach(link => {
  55. link.addEventListener('click', () => {
  56. toggleMenu();
  57. });
  58. });
  59. </script>
  60. @stack('scripts')
  61. </body>
  62. </html>