Доброй ночи. Нужен фидбэк по поводу кода. Скажите пожалуйста в правильном ли направлении я двигаюсь? Спасибо.
import {Link} from "react-router-dom";
import React from "react";
import { navigationItems } from '../config/navigationConfig';
import '../css/lowLvlComponents/navigation.css';
export default function GetNavigation() {
return SelectNavigation(navigationItems);
}
const SelectNavigation = (menuItems) => window.innerWidth < 1000 && window.innerWidth > 700 ? getNavigationTablet(menuItems) :
window.innerWidth < 700 ? getNavigationMobile(menuItems) : getNavigationPC(menuItems);
function getNavigationPC(navItems) {
return (
<SplitUpNavigation
navItems={navItems}
itemID={8}
itemClassName={'pc-list'}
itemTitle={'больше'}
itemOnClick={false}
itemIcon={false}
/>
)
}
function getNavigationTablet(navItems) {
return (
<SplitUpNavigation
navItems={navItems}
itemID={5}
itemClassName={'tablet-list'}
itemTitle={'больше'}
itemOnClick={true}
itemIcon={['fas fa-arrow-down', 'fas fa-arrow-up']}
/>
)
}
function getNavigationMobile(navItems) {
return (
<SplitUpNavigation
navItems={navItems}
itemID={1}
itemClassName={'mobile-list'}
itemTitle={''}
itemOnClick={true}
itemIcon={['fas fa-align-justify', 'fas fa-times']}
/>
)
}
function SplitUpNavigation({navItems, itemID, itemClassName, itemTitle, itemOnClick, itemIcon}) {
let items = navItems;
itemIcon = itemIcon instanceof Array ? itemIcon : [false, false];
itemOnClick = itemOnClick ?
(function() {
let state = navItems.find(item => item.id === itemID).state = !navItems.find(item => item.id === itemID).state;
!state ?
document.querySelector('li .icon').setAttribute('class', `icon ${itemIcon[0] ? itemIcon[0] : ''}`) :
document.querySelector('li .icon').setAttribute('class', `icon ${itemIcon[1] ? itemIcon[1] : ''}`);
!state ?
document.querySelector(`.${itemClassName} + ul`).style.display = 'none' :
document.querySelector(`.${itemClassName} + ul`).style.display = 'flex';
}) : null;
navItems = navItems.slice(0, itemID-1);
navItems.push(
{
id: itemID,
title: itemTitle,
children: [],
class: itemClassName,
classIcon: `icon ${itemIcon[0] ? itemIcon[0] : ''}`,
state: false,
onClick: itemOnClick
}
);
navItems.find(item => item.id === itemID).children = items.slice(itemID-1, items.length);
return (
<nav>
<Navigation items={navItems}/>
</nav>
)
}
const Navigation = ({ items }) =>
items instanceof Array && items.length
? <ul>
{items.map(n => (
<li key={n.id}>
<Link to='/' className={n.class} onClick={n.onClick}><div className={n.classIcon} />{n.title}</Link>
<Navigation items={n.children} />
</li>
))}
</ul>
: null;
Простой
