Hugging Face's logo

Spaces:
Finish-him
/
msc-codehive-academy
Running

App Files Community
msc-codehive-academy
File size: 2,893 Bytes 
c8a3bb1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
class MobileMenu extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: none;
          position: fixed;
          top: 0;
          right: 0;
          width: 100%;
          height: 100vh;
          background: rgba(0, 0, 0, 0.8);
          backdrop-filter: blur(8px);
          z-index: 1000;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease;
        }

        :host([open]) {
          display: block;
          opacity: 1;
          pointer-events: all;
        }

        .menu-container {
          position: absolute;
          top: 0;
          right: 0;
          width: min(90vw, 400px);
          height: 100vh;
          background: white;
          padding: 2rem;
          box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
          transform: translateX(100%);
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        :host([open]) .menu-container {
          transform: translateX(0);
        }

        .menu-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 3rem;
        }

        .close-btn {
          border: none;
          background: none;
          padding: 0.5rem;
          cursor: pointer;
          border-radius: 0.25rem;
        }

        .close-btn:hover {
          background: rgba(0, 0, 0, 0.05);
        }

        .menu-links {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }

        .menu-link {
          padding: 1rem;
          font-size: 1.1rem;
          color: var(--color-dark);
          text-decoration: none;
          border-radius: 0.5rem;
          transition: all 0.2s ease;
        }

        .menu-link:hover {
          background: rgba(79, 70, 229, 0.1);
          color: var(--color-primary);
        }

        .mobile-cta {
          margin-top: 2rem;
          width: 100%;
        }
      </style>

      <div class="menu-container">
        <div class="menu-header">
          <h3>Menu</h3>
          <button class="close-btn">
            <i data-feather="x"></i>
          </button>
        </div>
        
        <div class="menu-links">
          <a href="#cursos" class="menu-link">Cursos</a>
          <a href="#sobre" class="menu-link">Sobre</a>
          <a href="#" class="menu-link">Mentores</a>
          <a href="#" class="menu-link">Contato</a>
        </div>
        
        <a href="#" class="cta-button mobile-cta">
          Inscreva-se
          <i data-feather="arrow-right"></i>
        </a>
      </div>
    `;

    this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => {
      this.removeAttribute('open');
    });
  }
}

customElements.define('mobile-menu', MobileMenu);