Создание отзывчивой навигационной панели с помощью ReactJs.

Полный просмотр

Мобильный вид

  • Создайте приложение react.
yarn create react-app navbar
Вход в полноэкранный режим Выход из полноэкранного режима
  • Создайте компонент Navbar и рендерите его в App.js
import React from "react";
import Navbar from "./components/Navbar";

const App = () => {
  return (
    <>
      <Navbar />
    </>
  );
};

export default App;

Войдите в полноэкранный режим Выйти из полноэкранного режима
  • Код для Navbar.js для полноэкранного режима
import React from "react";
import "./Navbar.css";

const Navbar = () => {
  return (
<>
    <nav className="navbar">
      <h1>Navbar</h1>
      <ul>
        <li>Home</li>
        <li>Store</li>
        <li>About Us</li>
      </ul>

      <ul>
        <li>LogIn</li>
        <li>Register</li>
      </ul>
    </nav>
</>
  );
};

export default Navbar;

Войти в полноэкранный режим Выход из полноэкранного режима
  • Css для Navbar для полноэкранного режима.
.navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1.5em;
    border-bottom: 1px solid #ccc;
}

.navbar h1 {
    cursor: pointer;
    font-size: 20px;
}

.navbar ul {
    display: flex;
    align-items: center;
    gap: 1em;
}

.navbar ul li {
    cursor: pointer;
    list-style-type: none;
    font-size: 15px;
    font-weight: 600;
}
Войти в полноэкранный режим Выход из полноэкранного режима
  • Для мобильных устройств

Для использования иконки гамбургера нам необходимо установить сторонние зависимости.
Для этого мы будем использовать пакет библиотек react-icons.

yarn add react-icons
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, чтобы установить значок гамбургера, мы должны импортировать его из пакета библиотек react-icons.

import { GiHamburgerMenu } from "react-icons/gi";
Войти в полноэкранный режим Выйти из полноэкранного режима

и отобразить иконку

import React, { useState } from "react";
import "./Navbar.css";
import { GiHamburgerMenu } from "react-icons/gi";

const Navbar = () => {
  return (
    <>
      <nav className="navbar">
        <h1>Navbar</h1>

        <ul>
          <li>Home</li>
          <li>Store</li>
          <li>About Us</li>
        </ul>

        <ul>
          <li>LogIn</li>
          <li>Register</li>
        </ul>

        <GiHamburgerMenu
          size={20}
          className="navbarIcon"
        />
      </nav>
    </>
  );
};

export default Navbar;

Войдите в полноэкранный режим Выйти из полноэкранного режима

Существуют различные подходы для создания отзывчивого ui. В данном проекте мы будем использовать css media query и функцию react useState для настройки условий нашего ui и с помощью jsx мы создадим новую секцию с условием.

  • Полный код панели навигации
import React, { useState } from "react";
import "./Navbar.css";
import { GiHamburgerMenu } from "react-icons/gi";

const Navbar = () => {
  const [show, setShow] = useState(false);

  const handleNavbarDisplay = () => {
    setShow(!show);
  };
  return (
    <>
      <nav className="navbar">
        <h1>Navbar</h1>

        <ul>
          <li>Home</li>
          <li>Store</li>
          <li>About Us</li>
        </ul>

        <ul>
          <li>LogIn</li>
          <li>Register</li>
        </ul>

        <GiHamburgerMenu
          onClick={() => handleNavbarDisplay()}
          size={20}
          className="navbarIcon"
        />
      </nav>

      {show && (
        <section className="navbarMobile">
          <p>Home</p>
          <p>Store</p>
          <p>About Us</p>
          <p>LogIn</p>
          <p>Register</p>
        </section>
      )}
    </>
  );
};

export default Navbar;
Вход в полноэкранный режим Выход из полноэкранного режима
  • Завершить css
.navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1.5em;
    border-bottom: 1px solid #ccc;
}

.navbar h1 {
    cursor: pointer;
    font-size: 20px;
}

.navbar ul {
    display: flex;
    align-items: center;
    gap: 1em;
}

.navbar ul li {
    cursor: pointer;
    list-style-type: none;
    font-size: 15px;
    font-weight: 600;
}

.navbarIcon {
    display: none;
}

/* Mobile Responsive CSS */

@media only screen and (max-width: 600px) {
    .navbar {
        justify-content: space-between;
        height: 70px !important;
    }

    .navbar ul {
        display: none;
    }

    .navbarIcon {
        display: block;
        cursor: pointer;
    }

    .navbarMobile {
        display: flex;
        flex-direction: column;
        gap: 1.5em;
        padding: 20px;
        justify-content: flex-start;
        border-bottom: 1px solid #ccc;
    }

    .navbarMobile p {
        font-size: 18px;
        cursor: pointer;
        font-weight: 600;
    }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Спасибо, что прочитали эту статью, также поделитесь своим мнением и подходом, который вы используете для создания отзывчивого navbar.

Оцените статью
devanswers.ru
Добавить комментарий