WB comment appeler composant web avec button webdev et intgrer code codpen urgent

je veux integrer codpen.io template ou un example templatemonster dans mon projet
j 'ai creer comopsant web et j'integre code
mais je veut creer un button et faire apparaitre le menu etle cacher
------------------code html-------------
<div id="menu-btn" onClick="showMenu(true)">MENU<i class="fa fa-bars"></i></div>

<div id="menu__panel">
<i id="menu__close" class="menu__close fa fa-angle-left fa-2x" onClick="showMenu(false)"></i>
<ul class="menu">
<li class="menu-item"><a href="

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

"><i class="fa fa-home fa-2x"></i>HOME</a></li>
<li class="menu-item"><a href="

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

"><i class="fa fa-users fa-2x"></i>TEAM</a></li>
<li class="menu-item"><a href="

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

"><i class="fa fa-cubes fa-2x"></i>PRODUCTS</a></li>
<li class="menu-item"><a href="

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

"><i class="fa fa-shopping-cart fa-2x"></i>PRICING</a></li>
<li class="menu-item"><a href="

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

"><i class="fa fa-envelope fa-2x"></i>CONTACT</a></li>
</ul>
</div>
--------------------------------------------CSS------------------------
// -----------------------------------------
$color1:

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

;
$color2:

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

;
@import url(

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

// -----------------------------------------
div {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color:

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

;
font-family: 'Open Sans', sans-serif;
color:

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

;
}

h1 {
padding: 0 20px;
font-family: 'Oleo Script', sans-serif;
font-size: 4em;
border-top: 5px solid;
border-bottom: 5px solid;
}

a {
text-decoration: none;
color: inherit;
}

.fadeInDown {
opacity: 1 !important;
transform: translateY(40px) !important;
}

#menu-btn {
position: absolute;
top: 50px;
right: 20px;
padding: 10px 20px;
border: 1px solid transparent;
/* To avoid icon movement on hover */
font-weight: 300;
user-select: none;
transition: border-color 0.3s;
transform: translateY(-50%);
i {
margin-left: 10px;
}
&:hover {
cursor: pointer;
border-color:

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

;
}
}

#menu__panel {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 300px;
z-index: 9999;
background-color: $color1;
box-shadow: -2px 2px 20px rgba(

Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

, 0.5);
user-select: none;
transform: translateX(300px);
transition: transform 0.5s;
}

.menu {
position: absolute;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-content: center;
top: 40px;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}

.menu-item {
width: 100%;
height: 60px;
opacity: 0;
transform: translateY(0);
transition: all 0.3s;
&:hover {
background-color: $color2;
}
i {
margin: 0 10px;
}
a {
display: inline-block;
width: 100%;
height: 70px;
padding-left: 50px;
line-height: 70px;
}
}

.menu__close {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 10px;
transition: transform 0.5s;
&:hover {
cursor: pointer;
}
}
---------------------------------------javascript---------------------------
function showMenu(menu) {

var angle = '0deg',
slide = '300px';

if (menu) {
angle = '180deg';
slide = '0';
}

// Slide panel
$("#menu__panel").css({
transform: "translateX(" + slide + ")"
});

// Rotate icon
setTimeout(function() {
$("#menu__close").css({
transform: "rotate(" + angle + ")"
});
}, 300);

// Animate menu items
$(".menu-item").each(function(i) {
var row = $(this);
setTimeout(function() {
menu && row.addClass('fadeInDown');
!menu && row.removeClass('fadeInDown');
}, 100 * i);
});

}
-------------------------------------
le probleme je veut changer btn menu creer pardefaut code html par un button webdev et fait affichage de menu par la fonction show-menu()

 

probleme resolu j'a

 

problème résolu j’ai trouve la solution