make an e commerse website for electronics shop named bizrah, Done — I created the full **Bizrah Electronics** project scaffold (frontend React + Tailwind, plus Node/Express + MongoDB backend) in the canvas titled **"Bizrah - Full Stack E Commerce (React + Tailwind + Node+Mongo)"**.
e15bd5e
verified
| class CustomNavbar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| background: white; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| nav { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: #2563eb; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 1.5rem; | |
| align-items: center; | |
| } | |
| .nav-link { | |
| color: #4b5563; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .nav-link:hover { | |
| color: #2563eb; | |
| } | |
| .cart-icon { | |
| position: relative; | |
| } | |
| .cart-count { | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| background: #ef4444; | |
| color: white; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.75rem; | |
| } | |
| @media (max-width: 768px) { | |
| nav { | |
| flex-direction: column; | |
| gap: 1rem; | |
| padding: 1rem; | |
| } | |
| .nav-links { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| } | |
| </style> | |
| <nav> | |
| <a href="/" class="logo"> | |
| <i class="fas fa-laptop-code"></i> | |
| <span>Bizrah</span> | |
| </a> | |
| <div class="nav-links"> | |
| <a href="/" class="nav-link">Home</a> | |
| <a href="/products.html" class="nav-link">Products</a> | |
| <a href="/about.html" class="nav-link">About</a> | |
| <a href="/contact.html" class="nav-link">Contact</a> | |
| <a href="/cart.html" class="nav-link cart-icon"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span class="cart-count">0</span> | |
| </a> | |
| <a href="/login.html" class="nav-link"> | |
| <i class="fas fa-user"></i> | |
| </a> | |
| </div> | |
| </nav> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-navbar', CustomNavbar); |