Написал свое решение, но получилось много кода. Пошел за ответами в интернет и наткнулся на этот вопрос.
Оставлю код здесь, возможно это не худшее решение.
flexMenu('.navigation nav', {
el: '.nav_item',
quantity: 2,
burger: '.burger .burger_menu',
brackpoints: {
1350: {
quantity: 1
},
1200: {
quantity: 0
}
}
})
function flexMenu(carrentTarget, option) {
let brackpoints = option.brackpoints
brackpoints['9999'] = { quantity: option.quantity }//брекпоинт поумолчанию
let brackpoint_keys = []
for (const key in brackpoints) {
if (Object.hasOwnProperty.call(brackpoints, key)) {
brackpoint_keys.push(key)
}
}
brackpoint_keys.reverse()//По правилам заполнение брекпоинтов идет от большего к меньшему(так нагляднее), а в коде нужно наоборот
let currentWidth = 0
let oldValue = 0
let win_width = window.innerWidth
let quantity = 0
render()//Вызов при загрузке страницы
window.onresize = (e) => {
win_width = e.target.innerWidth
render()//Вызов при изменении ширины экрана - нужно для мобильных устройств так как они имеют поворот экрана
}
function render() {
for (const k of brackpoint_keys) {
if (win_width <= k) {
currentWidth = k
}
}
if (currentWidth && currentWidth != oldValue) {
for (const key in brackpoints) {
if (Object.hasOwnProperty.call(brackpoints, key)) {
if (key == currentWidth) {
quantity = brackpoints[key].quantity;
}
}
}
let menu_items = _GET_MENU_ITEMS_()
for (let i = 0; i < menu_items.length; i++) {
if (i < quantity) {
document.querySelector(`${carrentTarget}`).innerHTML += menu_items[i]
} else {
document.querySelector(`${option.burger}`).innerHTML += menu_items[i]
}
}
oldValue = currentWidth
}
}
function _GET_MENU_ITEMS_() {//Забирает пункты из контейнера меню и из бургер-меню
let menu_length = document.querySelectorAll(`${carrentTarget} ${option.el}`).length
let burger_length = document.querySelectorAll(`${option.burger} ${option.el}`).length
let html_menu_items = []
for (let i = 1; i < menu_length + 1; i++) {
html_menu_items.push(document.querySelector(`${carrentTarget} ${option.el}:nth-child(${i})`).outerHTML)
}
for (let i = 1; i < burger_length + 1; i++) {
html_menu_items.push(document.querySelector(`${option.burger} ${option.el}:nth-child(${i})`).outerHTML)
}
document.querySelector(`${carrentTarget}`).innerHTML = ''
document.querySelector(`${option.burger}`).innerHTML = ''
return html_menu_items
}
}
