Адаптивное меню со скрывающимися иконками
Необходимо реализовать с использованием одного css адаптивное меню со следующими условиями:
Кнопки фиксированной высоты и одинаковой ширины, текст может быть разной ширины
В случае если в одну из кнопок не входит текст и иконка в одну строку, то иконки должны скрыться на всех кнопках.
Демонстрация поведения на гифке:
Проблема состоит именно в одновременном скрытии иконок
Ссылка на код: https://codepen.io/Commissioner-Juve/pen/YzYNgxW
ul{
margin: 0;
margin-top: 15px;
margin-left: 15px;
padding: 0;
list-style: none;
display: flex;
width: 100%;
}
.ul li {
box-sizing: border-box;
overflow: hidden;
max-height: 36px;
max-width: 300px;
width: 100%;
}
.ul li:first-child > .adaptive-button {
border-radius: 8px 0 0 8px;
}
.ul li:last-child > .adaptive-button {
border-radius: 0 8px 8px 0;
}
.ul li:not(:last-child) {
border-right: 1px solid #4cc15a;
}
button {
font-family: Roboto, sans-serif;
font-size: 16px;
box-sizing: border-box;
background-color: #009b27;
max-width: 300px;
width: 100%;
min-height: 36px;
border: none;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
direction: rtl;
}
button svg {
margin-right: 10px;
}
button p {
box-sizing: border-box;
max-height: 36px;
order: -1;
margin: 0;
padding: 10px 0;
}<ul className="nav-block">
<li>
<button className="adaptive-button">
<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23 4.96898H20.913H18.723C20.104 2.55998 18.302 -0.125015 15.588 0.00398488C14.377 0.0609849 13.309 0.739985 12.729 1.82298L11.482 4.16498L10.234 1.82098C9.656 0.739985 8.588 0.0609849 7.377 0.00498488C4.664 -0.123015 2.897 2.55998 4.278 4.96998H2.094H0V7.09198L2.009 7.09498L1.991 15.878C1.991 17.05 2.927 18 4.082 18L18.804 17.997C19.959 17.997 20.895 17.047 20.895 15.875L20.913 7.09198H23V4.96898ZM14.217 2.64198C14.51 2.09399 15.052 1.74998 15.666 1.72098C17.002 1.65798 17.93 3.09798 17.278 4.33698C16.983 4.89698 16.465 4.93898 15.853 4.97098H12.839L14.217 2.64198ZM5.686 4.33598C5.049 3.12298 5.923 1.71798 7.216 1.71798C7.244 1.71798 7.271 1.71898 7.299 1.71998C7.913 1.74898 8.454 2.09299 8.747 2.63999L10.161 4.96998H7.147C6.535 4.93798 5.981 4.89598 5.686 4.33598ZM18.804 15.874L4.082 15.878L4.1 7.09498L18.822 7.09198L18.804 15.874Z" fill="white"/>
</svg>
<p>
Lorem ipsum dolor.
</p>
</button>
</li>
<li>
<button className="adaptive-button">
<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23 4.96898H20.913H18.723C20.104 2.55998 18.302 -0.125015 15.588 0.00398488C14.377 0.0609849 13.309 0.739985 12.729 1.82298L11.482 4.16498L10.234 1.82098C9.656 0.739985 8.588 0.0609849 7.377 0.00498488C4.664 -0.123015 2.897 2.55998 4.278 4.96998H2.094H0V7.09198L2.009 7.09498L1.991 15.878C1.991 17.05 2.927 18 4.082 18L18.804 17.997C19.959 17.997 20.895 17.047 20.895 15.875L20.913 7.09198H23V4.96898ZM14.217 2.64198C14.51 2.09399 15.052 1.74998 15.666 1.72098C17.002 1.65798 17.93 3.09798 17.278 4.33698C16.983 4.89698 16.465 4.93898 15.853 4.97098H12.839L14.217 2.64198ZM5.686 4.33598C5.049 3.12298 5.923 1.71798 7.216 1.71798C7.244 1.71798 7.271 1.71898 7.299 1.71998C7.913 1.74898 8.454 2.09299 8.747 2.63999L10.161 4.96998H7.147C6.535 4.93798 5.981 4.89598 5.686 4.33598ZM18.804 15.874L4.082 15.878L4.1 7.09498L18.822 7.09198L18.804 15.874Z" fill="white"/>
</svg>
<p>
Lorem ipsum.
</p>
</button>
</li>
<li>
<button className="adaptive-button">
<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23 4.96898H20.913H18.723C20.104 2.55998 18.302 -0.125015 15.588 0.00398488C14.377 0.0609849 13.309 0.739985 12.729 1.82298L11.482 4.16498L10.234 1.82098C9.656 0.739985 8.588 0.0609849 7.377 0.00498488C4.664 -0.123015 2.897 2.55998 4.278 4.96998H2.094H0V7.09198L2.009 7.09498L1.991 15.878C1.991 17.05 2.927 18 4.082 18L18.804 17.997C19.959 17.997 20.895 17.047 20.895 15.875L20.913 7.09198H23V4.96898ZM14.217 2.64198C14.51 2.09399 15.052 1.74998 15.666 1.72098C17.002 1.65798 17.93 3.09798 17.278 4.33698C16.983 4.89698 16.465 4.93898 15.853 4.97098H12.839L14.217 2.64198ZM5.686 4.33598C5.049 3.12298 5.923 1.71798 7.216 1.71798C7.244 1.71798 7.271 1.71898 7.299 1.71998C7.913 1.74898 8.454 2.09299 8.747 2.63999L10.161 4.96998H7.147C6.535 4.93798 5.981 4.89598 5.686 4.33598ZM18.804 15.874L4.082 15.878L4.1 7.09498L18.822 7.09198L18.804 15.874Z" fill="white"/>
</svg>
<p>
Lorem ipsumww.
</p>
</button>
</li>
</ul>