import React from "react";
import styled from "styled-components";
import MenuIcons from "./MenuIcons";

const MenuBar = styled.div`
  width: 15%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 1px 10px #8395a7;
  background-color: #667aff;
`;

const TitleBox = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 15%;
  font-size: 30px;
  color: white;
  margin-bottom: 10px;
`;

const Title = styled.span`
  font-family: "Raleway", sans-serif;
`;

export default () => {
  return (
    <MenuBar>
      <TitleBox>
        <Title>KhuChat</Title>
      </TitleBox>
      <MenuIcons />
    </MenuBar>
  );
};