Navigation.jsx

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
  grid-area: nav;
  height: 100%;
  width: 100%;
  background-color: #2e3131;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.4);
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  margin-top: 34px;
`;

const Text = styled.p`
  font-size: 14px;
  font-weight: bold;
  color: ${(props) => (props.active ? "#fdd189" : "#fff")};
  cursor: pointer;
  margin-bottom: 8px;
  margin-top: 0;
  transition: 250ms;

  &:hover {
    color: #fdd189;
  }
`;

const Title = styled.h1`
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  margin: 0;
`;

const Subtitle = styled.h2`
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-top: 32px;
  margin-bottom: 16px;
`;

export const Navigation = ({
  handleAddRoom,
  handleChangeRoom,
  rooms,
  activeRoom,
}) => {
  return (
    <Wrapper>
      <Container>
        <Title>Parakeet Chat</Title>
        <Subtitle>Channels</Subtitle>
        {rooms &&
          rooms.map((key, index) => {
            return (
              <Text
                active={activeRoom === key.id}
                key={index}
                onClick={() => handleChangeRoom(key.id)}
              >{`# ${key.name}`}</Text>
            );
          })}
      </Container>
    </Wrapper>
  );
};