HelloWorld97/layeredlearner-assignment-mastermind

1class CustomNavbar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        .navbar {7          background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);8          color: white;9          box-shadow: 0 4px 20px rgba(0,0,0,0.1);10        }11        12        .navbar-container {13          max-width: 1200px;14          margin: 0 auto;15          padding: 0 1rem;16        }17        18        .nav-content {19          display: flex;20          justify-content: space-between;21          align-items: center;22          padding: 1rem 0;23        }24        25        .logo {26          display: flex;27          align-items: center;28          gap: 0.75rem;29          text-decoration: none;30        }31        32        .logo-text {33          font-size: 1.5rem;34          font-weight: bold;35          color: white;36        }37        38        .logo-icon {39          background: rgba(255,255,255,0.2);40          padding: 0.5rem;41          border-radius: 12px;42        }43        44        .nav-links {45          display: flex;46          align-items: center;47          gap: 2rem;48        }49        50        .nav-link {51          color: rgba(255,255,255,0.9);52          text-decoration: none;53          font-weight: 500;54          padding: 0.5rem 0;55          position: relative;56          transition: color 0.2s;57          display: flex;58          align-items: center;59          gap: 0.5rem;60        }61        62        .nav-link:hover {63          color: white;64        }65        66        .nav-link.active::after {67          content: '';68          position: absolute;69          bottom: -4px;70          left: 0;71          right: 0;72          height: 2px;73          background: white;74          border-radius: 1px;75        }76        77        .mobile-menu-btn {78          display: none;79          background: none;80          border: none;81          color: white;82          cursor: pointer;83          padding: 0.5rem;84        }85        86        @media (max-width: 768px) {87          .mobile-menu-btn {88            display: block;89          }90          91          .nav-links {92            position: fixed;93            top: 64px;94            left: 0;95            right: 0;96            background: white;97            flex-direction: column;98            padding: 1rem;99            gap: 0;100            box-shadow: 0 4px 6px rgba(0,0,0,0.1);101            transform: translateY(-100%);102            opacity: 0;103            transition: transform 0.3s, opacity 0.3s;104            z-index: 1000;105          }106          107          .nav-links.active {108            transform: translateY(0);109            opacity: 1;110          }111          112          .nav-link {113            color: #374151;114            padding: 0.75rem 1rem;115            width: 100%;116            border-radius: 0.5rem;117          }118          119          .nav-link:hover {120            background: #f3f4f6;121          }122          123          .nav-link.active {124            color: #3b82f6;125          }126          127          .nav-link.active::after {128            display: none;129          }130        }131        132        .user-info {133          display: flex;134          align-items: center;135          gap: 1rem;136        }137        138        .user-avatar {139          width: 32px;140          height: 32px;141          background: rgba(255,255,255,0.2);142          border-radius: 50%;143          display: flex;144          align-items: center;145          justify-content: center;146          font-weight: bold;147        }148      </style>149      150      <nav class="navbar">151        <div class="navbar-container">152          <div class="nav-content">153            <a href="index.html" class="logo">154              <div class="logo-icon">155                <i data-feather="layers"></i>156              </div>157              <span class="logo-text">LayeredLearner</span>158            </a>159            160            <button class="mobile-menu-btn" aria-label="Menu">161              <i data-feather="menu"></i>162            </button>163            164            <div class="nav-links">165              <a href="index.html" class="nav-link active">166                <i data-feather="home"></i>167                Dashboard168              </a>169              <a href="courses.html" class="nav-link">170                <i data-feather="book"></i>171                Courses172              </a>173              <a href="assignments.html" class="nav-link">174                <i data-feather="file-text"></i>175                Assignments176              </a>177              <a href="ai-tools.html" class="nav-link">178                <i data-feather="zap"></i>179                AI Tools180              </a>181              <a href="settings.html" class="nav-link">182                <i data-feather="settings"></i>183                Settings184              </a>185              186              <div class="user-info">187                <div class="user-avatar">188                  <i data-feather="user"></i>189                </div>190                <span class="user-name">Student</span>191              </div>192            </div>193          </div>194        </div>195      </nav>196    `;197    198    // Add mobile menu toggle199    const menuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');200    const navLinks = this.shadowRoot.querySelector('.nav-links');201    202    menuBtn.addEventListener('click', () => {203      navLinks.classList.toggle('active');204      const icon = menuBtn.querySelector('i');205      if (navLinks.classList.contains('active')) {206        icon.setAttribute('data-feather', 'x');207      } else {208        icon.setAttribute('data-feather', 'menu');209      }210      feather.replace();211    });212    213    // Close mobile menu when clicking outside214    document.addEventListener('click', (e) => {215      if (!this.shadowRoot.contains(e.target) && navLinks.classList.contains('active')) {216        navLinks.classList.remove('active');217        const icon = menuBtn.querySelector('i');218        icon.setAttribute('data-feather', 'menu');219        feather.replace();220      }221    });222    223    // Update active link based on current page224    const currentPage = window.location.pathname.split('/').pop() || 'index.html';225    const links = this.shadowRoot.querySelectorAll('.nav-link');226    links.forEach(link => {227      const href = link.getAttribute('href');228      if (href === currentPage || (currentPage === '' && href === 'index.html')) {229        link.classList.add('active');230      } else {231        link.classList.remove('active');232      }233    });234    235    // Initialize feather icons236    feather.replace();237  }238}239 240customElements.define('custom-navbar', CustomNavbar);