Боковое меню для сайта на React Native

Question

Здраствуйте, я студент.

Поставил себе задачу сделать на React такое меню для приложения (Слева меню закрыто, но видны иконки. Справа меню открыто, и видно название вкладок).

Я перерыл всё, но не нашёл как сделать такое на React, я знаю что так можно сделать через CSS,JS

Я сделал демо

$(".side-menu").mouseenter(function() {
  $(this).animate({
    left: 0
  });
  $(this).children(".m").children("div").children(".tit").show(500);
});

$('.side-menu').mouseleave(function() {
  $(this).animate({
    left: -($(this).width() - $(this).children(".m").children("div").children("i").width())
  })
});

.side-menu {
  background-color: #333;
  border: 1px solid #444;
  color: #fff;
  display: block;
  font-size: 15px;
  font-weight: 700;
  left: -50px;
  padding: 15px;
  text-decoration: none;
  top: 0;
  height: 100%;
  position: fixed;
  z-index: 5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="">
  Content
</div>
<div class="side-menu">
  <div class="m">
    <div><span class="tit">Movie</span> <i class="fas fa-film"></i></div>
  </div>
</div>

Но, довольно примитивно, тем более не на React, там при наведении меню открывается, как сделать когда меню активно, оно будет открываться

ДОПОЛНИЛ:

Есть ли возможность как-то плавно скрыть текст?
Есть ли возможность адаптировать под ТВ пульт?

Вот что вышло на React: https://h7ng2.csb.app/

БЛОГ НА HUSL

Боковое меню для сайта на React Native

Ответы (0 шт):