ValeraNakhuy

Перевести размеры и отступы из px в vh.
Размер экрана меняется => элементы с vh меняют размеры относительно экрана.

Можно, RGB светодиод и датчик движения.
Начать можно например с Bionic Arduino или какой нибудь книги или статьи.

Например:

const str = `
  <script>
    console.log(1)
  </script>
  <script>
    console.log(1)
  </script>
`;
const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.text = str.replace(/<[^>]*>?/gm, '');
head.appendChild(script);

Вот только нет никакой разницы вставите вы script в head или в body.

попробуйте копать в сторону порталов, может это то, что нужно

Dran n Drop не меняет элементы местами. Это просто апи для того чтобы дать возможность пользователю что-то потащить мышкой и отследить что и куда он тащит.
Остальное - ваша забота, пишите самостоятельно. Хоть на чистом JS хоть с помощью какой-то библиотеки. Мне нравилась https://github.com/react-dnd/react-dnd в свое время.

1. drag&drop легче чем ты думаешь, вот пример на чистом js (легко гуглится, полно инфы):
https://www.w3schools.com/html/tryit.asp?filename=...

2. Чтобы менять элементы местами, можно сделать их через flex и менять им атрибут order на дропах
https://codepen.io/abechiyo/pen/aJdQXm

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

К сожаление, Вам только вкладка Performance поможет. Посмотрите в ней, что конкретно больше времени занимает. Мне кажется, что это Layout и JS тут не причем.

JS конечно же является причиной, но проблема может быть на другой уровне.

Я бы посоветовал прочитать вот эту статью. И в ней есть огромное количество на полезную инфу в том числе и на курсы от udacity