components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          left: 0;
          top: 0;
          width: 220px;
          height: 100vh;
          background: #222;
          border-right: 1px solid #333;
          padding: 2rem 1rem;
          box-sizing: border-box;
        }
        .logo {
          font-size: 1.5rem;
          margin-bottom: 2rem;
          color: #fff;
          border-bottom: 1px solid #444;
          padding-bottom: 1rem;
        }
        nav ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        nav li {
          margin-bottom: 1rem;
        }
        nav a {
          color: #aaa;
          text-decoration: none;
          transition: color 0.3s;
          font-size: 1.1rem;
        }
        nav a:hover {
          color: #fff;
        }
      </style>
      <div class="logo">Pixel Pause</div>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/nature.html">Nature</a></li>
          <li><a href="/urban.html">Urban</a></li>
          <li><a href="/travel.html">Travel</a></li>
          <li><a href="/portraits.html">Portraits</a></li>
          <li><a href="/aerial.html">Aerial</a></li>
          <li><a href="/minimal.html">Minimal</a></li>
        </ul>
      </nav>
`;
  }
}
customElements.define('custom-sidebar', CustomSidebar);