[TIL/React] 2023/08/07

import React, { useState } from "react";
import Sidebar from "./Components/Sidebar";

function App() {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  return (
    <div>
      <button onClick={toggleSidebar}>Toggle Sidebar</button>
      <Sidebar open={sidebarOpen} onClose={toggleSidebar} />
    </div>
  );
}

export default App;

export const SidebarData = [
  {
    title: "Home",
    link: "/home",
  },
  {
    title: "Mailbox",
    link: "/mailbox",
  },
  {
    title: "Analytics",
    link: "/analytics",
  },
  {
    title: "Dashboard",
    link: "/dashboard",
  },
  {
    title: "Images",
    link: "/images",
  },
];

import React from "react";
import styled from "styled-components";
import { SidebarData } from "./SidebarData";

const SidebarContainer = styled.div`
  height: 100vh;
  width: ${({ open1 }) => (open1 ? "250px" : "0")};
  background-color: #2f4050;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.5s;
  overflow-x: hidden;
`;

const CloseSidebarButton = styled.button`
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  position: absolute;
  top: 0;
  right: 0;
`;

const SidebarList = styled.ul`
  height: auto;
  padding: 0;
  width: 100%;
`;

const SidebarItem = styled.li`
  width: 100%;
  height: 60px;
  list-style-type: none;
  margin: 0;
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: center;
  align-items: center;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  &:hover {
    cursor: pointer;
    background-color: #293846;
  }
  ${({ active }) =>
    active &&
    `
    background-color: #293846;
  `}
`;

const SidebarComponent = ({ open, onClose }) => {
  const handleLinkClick = (link) => {
    window.location.pathname = link;
  };

  return (
    <SidebarContainer open1={open}>
      <CloseSidebarButton onClick={onClose}>X</CloseSidebarButton>
      <SidebarList>
        {SidebarData?.map((val, key) => {
          return (
            <SidebarItem
              key={key}
              active={window.location.pathname === val.link}
              onClick={() => handleLinkClick(val.link)}
            >
              {val.title}
            </SidebarItem>
          );
        })}
      </SidebarList>
    </SidebarContainer>
  );
};

export default SidebarComponent;