components/rightsidebar.js

class AppRightsidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                .section-title {
                    color: #b0b3b8;
                    font-size: 12px;
                    font-weight: bold;
                    margin-bottom: 8px;
                    border-bottom: 1px solid #3e4042;
                    padding-bottom: 5px;
                }
                .ad-item {
                    margin-bottom: 15px;
                }
                .ad-image {
                    width: 100%;
                    height: 150px;
                    object-fit: cover;
                    border-radius: 5px;
                    margin-bottom: 5px;
                }
                .ad-title {
                    font-size: 12px;
                    color: #e4e6eb;
                    font-weight: bold;
                    display: block;
                }
                .ad-desc {
                    font-size: 11px;
                    color: #b0b3b8;
                    display: block;
                }
                .request-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                }
                .request-avatar {
                    width: 40px;
                    height: 40px;
                    border-radius: 2px;
                    margin-right: 8px;
                }
                .request-info a {
                    font-size: 12px;
                    font-weight: bold;
                    display: block;
                }
                .request-info span {
                    font-size: 11px;
                    color: #b0b3b8;
                }
            </style>

            <div class="requests">
                <div class="section-title">FRIEND REQUESTS</div>
                <div class="request-item">
                    <img src="http://static.photos/people/40x40/55" class="request-avatar" alt="User">
                    <div class="request-info">
                        <a href="#">John Doe</a>
                        <span>3 mutual friends</span>
                    </div>
                </div>
                <div class="request-item">
                    <img src="http://static.photos/people/40x40/56" class="request-avatar" alt="User">
                    <div class="request-info">
                        <a href="#">Jane Smith</a>
                        <span>8 mutual friends</span>
                    </div>
                </div>
            </div>

            <div class="sponsored" style="margin-top: 30px;">
                <div class="section-title">SPONSORED</div>
                <div class="ad-item">
                    <img src="http://static.photos/technology/280x150/101" class="ad-image" alt="Ad">
                    <a href="#" class="ad-title">Learn Coding Today</a>
                    <span class="ad-desc">code-academy.example.com</span>
                </div>
                <div class="ad-item">
                    <img src="http://static.photos/food/280x150/102" class="ad-image" alt="Ad">
                    <a href="#" class="ad-title">Best Pizza in Town</a>
                    <span class="ad-desc">pizzaplace.example.com</span>
                </div>
            </div>
        `;
    }
}
customElements.define('app-rightsidebar', AppRightsidebar);