RashFever/code-conductor-with-a-smile

1class CustomNavbar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        nav {7          background: rgba(17, 24, 39, 0.8);8          backdrop-filter: blur(10px);9          padding: 1rem 2rem;10          display: flex;11          justify-content: space-between;12          align-items: center;13          position: fixed;14          width: 100%;15          top: 0;16          z-index: 50;17          transition: all 0.3s ease;18        }19        nav.scrolled {20          background: rgba(17, 24, 39, 0.95);21          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);22        }23        .logo {24          color: white;25          font-weight: bold;26          font-size: 1.5rem;27          display: flex;28          align-items: center;29          gap: 0.5rem;30        }31        .logo-icon {32          color: #818cf8;33        }34        ul {35          display: flex;36          gap: 1.5rem;37          list-style: none;38          margin: 0;39          padding: 0;40        }41        a {42          color: white;43          text-decoration: none;44          font-weight: 500;45          transition: color 0.2s;46          position: relative;47        }48        a:hover {49          color: #818cf8;50        }51        a::after {52          content: '';53          position: absolute;54          width: 0;55          height: 2px;56          bottom: -4px;57          left: 0;58          background-color: #818cf8;59          transition: width 0.3s;60        }61        a:hover::after {62          width: 100%;63        }64        .mobile-menu-button {65          display: none;66          background: none;67          border: none;68          color: white;69          cursor: pointer;70        }71        @media (max-width: 768px) {72          ul {73            display: none;74            flex-direction: column;75            position: absolute;76            top: 100%;77            left: 0;78            right: 0;79            background: rgba(17, 24, 39, 0.95);80            padding: 1rem;81          }82          ul.active {83            display: flex;84          }85          .mobile-menu-button {86            display: block;87          }88        }89      </style>90      <nav>91        <a href="/" class="logo">92          <i data-feather="code" class="logo-icon"></i>93          <span>Tebogo Selahle</span>94        </a>95        <button class="mobile-menu-button">96          <i data-feather="menu"></i>97        </button>98        <ul>99          <li><a href="#about">About</a></li>100          <li><a href="#experience">Experience</a></li>101          <li><a href="#education">Education</a></li>102          <li><a href="#contact">Contact</a></li>103        </ul>104      </nav>105    `;106 107    // Add scroll effect108    const nav = this.shadowRoot.querySelector('nav');109    window.addEventListener('scroll', () => {110      if (window.scrollY > 50) {111        nav.classList.add('scrolled');112      } else {113        nav.classList.remove('scrolled');114      }115    });116 117    // Mobile menu toggle118    const menuButton = this.shadowRoot.querySelector('.mobile-menu-button');119    const menu = this.shadowRoot.querySelector('ul');120    menuButton.addEventListener('click', () => {121      menu.classList.toggle('active');122      menuButton.innerHTML = menu.classList.contains('active') 123        ? feather.icons.x.toSvg() 124        : feather.icons.menu.toSvg();125    });126  }127}128customElements.define('custom-navbar', CustomNavbar);