Виталий Киренков

https://javascript.ru/forum/css-html/29896-indikat...

Как-то так видимо. Ну и адаптировать под себя с большим кол-вом.

Сложно без кода отвечать, ибо есть несколько нюансов:
1. Меню физически существует после закрытия или удаляется?
2. Элементы ре-рендерятся при анимации схлопывания? Если да, то почему?
3. Как меняется ширина элементов? Вы из жс вывчисляете ширину и влоб устанавливаете каждому элементу или это на уровне ксс реализуется?
4. Какого типа у вас компоненты?
5. Используется ли shouldComponentUpdate?

1. У вас рассинхрон в вопросе и описании
2. Что значит крэшиться? Какая ошибка?
3. Картинки - должен быть соответствующий лоадер в вебпаке (если вы его юзаете)
4. Куда в коде конкретно смотреть? Что не так?

Простите, но у вас очень грязный код. Вынесите всю логику в отдельные методы из рендера.

Касательно анимации - https://reactjs.org/docs/animation.html
`transitionName` - это класс анимации, а не страницы. Посмотрите внимательно документацию.

Подключите библиотеку classname. Избежите таких конструкций:

if(this.state.open == true) {
            classList = 'main-wrapper main-wrapper--active';
        } else {
            classList = 'main-wrapper';
        }

Я бы сделал несколько вещей.
1. Свёл методы onHandleEventFetch и onHandleEventByTypeFetch, потому что они идентичны. Будет проще дебажить
2. Посмотрел, что возвращает метод componentWillReceiveProps
3. Вывел консоль в рендер, есть подозрение, что он вызывается несколько раз. То есть вы установили значение, что произошло ещё и установилось новое значение, которое перетёрло полученное.

P.S. называть ключ event и при этом сохранять в него данные, как то нелогично. Лучше уж data, хотя бы.

перед :id пробовали / добавить?
пробовали юзать DefaultRoute?
пробовали добавить name?

https://github.com/reflux/refluxjs