개요

플랫폼에서 사이드바를 구현하는 데 사용할 수 있는 몇 가지 접근 방식이 있지만 이러한 각 접근 방식의 디자인은 페이지 레이아웃과 사이드바가 제공할 목적에 따라 크게 달라집니다.

분명히 사이드바는 사용자에게 애플리케이션에서 탐색을 제공하는 단 하나의 목적을 가지고 있습니다. 그러나 다음과 같은 몇 가지 원칙을 고려해야 합니다.

5개 이상의 대상에 대해 사이드바를 사용하십시오.

요소와 해당 그룹을 식별할 수 있어야 합니다.

요소는 적절하게 정렬되어야 하며 가장 인기 있거나 중요한 경로가 먼저 있어야 합니다.

이것들은 내가 고려하는 몇 가지 요소이지만 어쨌든 this Material Design 페이지를 읽는 것이 좋습니다.

오늘의 예

오늘 우리는 단일 구성 요소를 만들 것입니다. 그것은 단지 사이드바일 것입니다. 이 동일한 구성 요소는 화면에서 너무 많은 공간을 차지하지 않도록 작은 너비를 가지지만 직관적이고 매우 간결해야 합니다.

제 말의 의미를 알 수 있도록 이 기사의 끝에서 다음과 같은 최종 결과를 얻으시기 바랍니다.

코딩하자

오늘 사용할 프레임워크는 Tailwind CSS이며 이 프레임워크와 함께 클래스 이름 및 반응 아이콘과 같은 다른 도구를 사용할 것입니다.

npm install classnames react-icons

그 후 우리는 우리가 가질 탐색 요소의 이름을 가진 파일을 만들 것입니다.

// @src/data/navigation.js
export default ["Home", "Gallery", "Store", "Favorites", "Saved"];

이제 사이드바 작업을 시작할 수 있습니다. 보다 구체적으로 스타일을 지정하는 데 사용된 스타일은 다음과 같습니다.

/* @src/components/Sidebar.module.css */

.wrapper {
    @apply fixed left-0 top-0 bottom-0 z-50 w-14 bg-white flex flex-col h-screen justify-between items-center py-6 rounded-tr-4xl rounded-br-4xl;
}

.logo {
    @apply text-4xl text-gray-800;
}

.navListItems {
    @apply flex flex-col items-center w-full;
}

.navItem {
    @apply text-gray-400 hover:text-gray-800 text-xl py-4 cursor-pointer;
}

.navItemActive {
    @apply text-blue-600 hover:text-blue-700; 
}

.tooltip {
    @apply absolute w-auto min-w-max left-16 text-base font-medium hidden;
}

.bottomWrapper {
    @apply flex flex-col justify-between items-center;
}

.notifications {
    @apply w-10 h-10 bg-gray-100 hover:bg-gray-200 cursor-pointer rounded-xl flex items-center justify-center text-gray-800 text-lg relative mb-4;
}

.badge {
    @apply h-5 w-5 flex justify-center items-center text-white absolute -top-1 -right-1 bg-red-500 text-xs rounded-full;
}

.settingsLogo {
    @apply text-3xl text-gray-400 hover:text-gray-800 cursor-pointer;
}

컴포넌트는 이전에 정의된 탐색 데이터(경로)가 될 단 하나의 prop을 받습니다. 그런 다음 useState 후크를 사용하여 선택한 경로를 정의합니다(초기 경로는 홈이 됨). 다음으로 우리는 배열의 요소에 따라 표시된 아이콘을 반환하는 데 사용되는 switch 문이 있는 함수를 만들어야 합니다.

// @src/components/Sidebar.jsx
import React, { useState, useCallback } from "react";
import { IoLogoEdge, IoBookmark } from "react-icons/io5";
import {
  BsImageFill,
  BsFillHandbagFill,
  BsFillStarFill,
  BsHouseFill,
} from "react-icons/bs";
import { RiSettings4Fill } from "react-icons/ri";
import { FaRegBell } from "react-icons/fa";
import classNames from "classnames";

import styles from "./Sidebar.module.css";

const Sidebar = ({ navigationData }) => {
  const [currentRoute, setCurrentRoute] = useState("Home");

  const renderIcon = useCallback((element) => {
    switch (element) {
      case "Home":
        return <BsHouseFill />;
      case "Gallery":
        return <BsImageFill />;
      case "Store":
        return <BsFillHandbagFill />;
      case "Favorites":
        return <BsFillStarFill />;
      case "Saved":
        return <IoBookmark />;
    }
  }, []);

  return (
    <nav className={styles.wrapper}>
      <span className={styles.logo}>
        <IoLogoEdge />
      </span>
      <ul className={styles.navListItems}>
        {navigationData.map((element, index) => (
          <li
            key={index}
            className={classNames([
              styles.navItem,
              currentRoute === element && styles.navItemActive,
              "group",
            ])}
            onClick={() => setCurrentRoute(element)}
          >
            {renderIcon(element)}
            <span
              className={classNames([styles.tooltip, "group-hover:inline"])}
            >
              {element}
            </span>
          </li>
        ))}
      </ul>
      <div className={styles.bottomWrapper}>
        <div className={styles.notifications}>
          <span className={styles.badge}>24</span>
          <FaRegBell />
        </div>
        <span className={styles.settingsLogo}>
          <RiSettings4Fill />
        </span>
      </div>
    </nav>
  );
};

export default Sidebar;

마지막으로 항목 파일(이 경우 App.jsx)로 이동해야 하며 다음과 같은 스타일을 갖게 됩니다.

/* @src/App.module.css */

.container {
  @apply bg-gray-200;
}

.devLogo {
  @apply flex items-center justify-center text-5xl text-gray-300 h-screen;
}

이제 App.jsx에서 탐색 데이터와 생성한 사이드바 구성 요소를 가져온 다음 표시된 소품을 전달합니다.

// @src/App.jsx
import React from "react";
import { FaDev } from "react-icons/fa";

import styles from "./App.module.css";
import Sidebar from "./components/Sidebar";
import navigationData from "./data/navigation";

const App = () => {
  return (
    <div className={styles.container}>
      <Sidebar navigationData={navigationData} />
      <div className={styles.devLogo}>
        <FaDev />
      </div>
    </div>
  );
};

export default App;

결론

항상 그렇듯이 흥미롭게 보셨기를 바랍니다. 이 기사에서 오류를 발견했다면 댓글에 언급해 주세요. 🧑🏻‍💻

좋은 하루 되세요! 🙌