davisdec/the-dramatic-truth-studio

1 2class CustomNavbar extends HTMLElement {3    constructor() {4        super();5        this.mobileMenuOpen = false;6    }7 8    connectedCallback() {9        this.attachShadow({ mode: 'open' });10        this.render();11        12        // Add event listener for mobile menu13        this.shadowRoot.getElementById('mobile-menu-button').addEventListener('click', () => {14            this.toggleMobileMenu();15        });16    }17 18    toggleMobileMenu() {19        this.mobileMenuOpen = !this.mobileMenuOpen;20        const menu = this.shadowRoot.getElementById('mobile-menu');21        menu.classList.toggle('open');22        23        // Change icon based on state24        const icon = this.shadowRoot.querySelector('#mobile-menu-button i');25        if (this.mobileMenuOpen) {26            icon.setAttribute('data-feather', 'x');27        } else {28            icon.setAttribute('data-feather', 'menu');29        }30        feather.replace();31    }32 33    render() {34this.shadowRoot.innerHTML = `35            <style>36                :host {37                    display: block;38                    font-family: 'Raleway', sans-serif;39                }40                .nav-link {41                    position: relative;42                    font-weight: 600;43                    transition: all 0.3s ease;44                }45                .nav-link::after {46                    content: '';47                    position: absolute;48                    width: 0;49                    height: 2px;50                    bottom: -4px;51                    left: 0;52                    background-color: #f59e0b;53                    transition: width 0.3s ease;54                }55                .nav-link:hover::after {56                    width: 100%;57                }58                .mobile-menu {59                    transition: all 0.3s ease;60                    max-height: 0;61                    overflow: hidden;62                }63                .mobile-menu.open {64                    max-height: 500px;65                    padding: 1rem 0;66                }67                .apply-btn {68                    background: linear-gradient(135deg, #6366f1, #8b5cf6);69                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);70                }71                .apply-btn:hover {72                    background: linear-gradient(135deg, #4f46e5, #7c3aed);73                    transform: translateY(-2px);74                }75            </style>76            <nav class="fixed w-full z-50 bg-white shadow-lg backdrop-blur-sm bg-opacity-90">77<div class="max-w-7xl mx-auto px-6">78                    <div class="flex justify-between items-center py-4">79                        <a href="/" class="flex items-center">80                            <span class="text-2xl font-playfair font-bold text-indigo-900">The Dramatic Truth</span>81</a>82                        83                        <!-- Desktop Navigation -->84                        <div class="hidden md:flex items-center space-x-8">85                            <a href="/about" class="nav-link text-gray-700 hover:text-indigo-900">Our Philosophy</a>86                            <a href="/classes" class="nav-link text-gray-700 hover:text-indigo-900">Programs</a>87                            <a href="/faculty" class="nav-link text-gray-700 hover:text-indigo-900">Mentors</a>88                            <a href="/events" class="nav-link text-gray-700 hover:text-indigo-900">Showcases</a>89                            <a href="/contact" class="nav-link text-gray-700 hover:text-indigo-900">Join Us</a>90                            <a href="/apply" class="px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:from-indigo-700 hover:to-purple-700 transition duration-300 shadow-lg">Audition Now</a>91</div>92                        <!-- Mobile menu button -->93                        <div class="md:hidden">94                            <button id="mobile-menu-button" class="text-gray-700 focus:outline-none p-2 rounded-md hover:bg-gray-100">95                                <i data-feather="menu" class="w-6 h-6"></i>96                            </button>97                        </div>98                    </div>99                </div>100                101                <!-- Mobile Navigation -->102                <div id="mobile-menu" class="mobile-menu md:hidden bg-white w-full px-6 shadow-lg">103<div class="flex flex-col space-y-4">104                        <a href="/about" class="text-gray-700 hover:text-indigo-900 py-2">About</a>105                        <a href="/classes" class="text-gray-700 hover:text-indigo-900 py-2">Classes</a>106                        <a href="/faculty" class="text-gray-700 hover:text-indigo-900 py-2">Faculty</a>107                        <a href="/events" class="text-gray-700 hover:text-indigo-900 py-2">Events</a>108                        <a href="/contact" class="text-gray-700 hover:text-indigo-900 py-2">Contact</a>109                        <a href="/apply" class="px-4 py-2 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition duration-300 text-center">Apply Now</a>110                    </div>111                </div>112            </nav>113        `;114    }115}116 117customElements.define('custom-navbar', CustomNavbar);