rifikaru/python-data-structures-explorer

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                nav {7                    background-color: white;8                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);9                }10                .container {11                    max-width: 1200px;12                    margin: 0 auto;13                    padding: 1rem;14                }15                .nav-content {16                    display: flex;17                    justify-content: space-between;18                    align-items: center;19                }20                .logo {21                    font-weight: 700;22                    font-size: 1.5rem;23                    color: #f59e0b;24                    text-decoration: none;25                    display: flex;26                    align-items: center;27                }28                .logo-icon {29                    margin-right: 0.5rem;30                }31                .nav-links {32                    display: flex;33                    gap: 1.5rem;34                }35                .nav-link {36                    color: #4b5563;37                    text-decoration: none;38                    font-weight: 500;39                    transition: color 0.2s;40                }41                .nav-link:hover {42                    color: #f59e0b;43                }44                @media (max-width: 768px) {45                    .nav-links {46                        display: none;47                    }48                }49            </style>50            <nav>51                <div class="container">52                    <div class="nav-content">53                        <a href="index.html" class="logo">54                            <i data-feather="code" class="logo-icon"></i>55                            <span>PythonVN</span>56</a>57                        <div class="nav-links">58                            <a href="index.html" class="nav-link">Home</a>59                            <a href="#" class="nav-link">Lists</a>60                            <a href="#" class="nav-link">Tuples</a>61                            <a href="#" class="nav-link">Sets</a>62                            <a href="#" class="nav-link">Dictionaries</a>63                        </div>64                    </div>65                </div>66            </nav>67        `;68    }69}70 71customElements.define('custom-navbar', CustomNavbar);