Как добавить «гамбургер» развернуть/свернуть в сложное разделенное меню div ⇐ CSS

[Anonymous]

Мне нужна помощь. У меня сложная верхняя навигация. У меня есть общий макет, и прежде чем я закончу оформление навигации, я хотел бы добавить значок «Гамбургер», чтобы развернуть/свернуть навигацию для мобильных устройств.
Кто-нибудь знает, как добавить эта функциональность для моей навигации? Добавлен бонус — классная анимация гамбургера.
CodePen https://codepen.io/R-P-P/pen/OPLgoVb
HTML

Код: Выделить всё

Home
Donors
Donate
Gallery
Directory
About
Contact
Curate
Stats


FOLLOW
Gettr
IG
LinkedIn
Reddit
Telegram
TikTok
Truth
X


SHARE
Facebook
Gettr
LinkedIn
Pinterest
Reddit
Telegram
Truth
X

CSS

Код: Выделить всё

.navcontainerhome {
display: flex;
flex-direction : row;
float: left;
}

.navcontainerhome div {
border:1px solid black;
padding: 5px;
}
.navcontainerfollow {
display: flex;
flex-direction : row;
float:right;
}

.navcontainerfollow div {
border:1px solid black;
padding: 5px;
}
.navcontainershare {
display: flex;
flex-direction : row;
float:right;
}

.navcontainershare div {
border:1px solid black;
padding: 5px;
}

/* width will changed later once I have the width size of all elements */
@media only screen and (max-width: 1520px) {

.navcontainerhome {
flex-direction : column;
width: 100%;

/*background-color: lightblue;   */
}
.navcontainerfollow {
float:left;

margin: 0 auto 0 auto;
width: 100%;
min-width: 0;
}
#followsocial {
width: 80px;
}
.navcontainershare {
float:left;

margin: 0 auto 0 auto;
width: 100%;
min-width: 0;
}
#sharesocial {
width: 80px;
}
}

Не стесняйтесь редактировать, разветвлять и присылать мне ссылку.
Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-div-menu