content: import React from 'react';
  import styled from 'styled-components';
  import { Menu } from 'semantic-ui-react';
  import Router from 'next/router';
  
  const StyledSidebar = styled(Menu)`
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 200px !important;
    background-color: #F0F0F0 !important;
    overflow-y: scroll;
    z-index: 1;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
  `;
  
  const Logo = styled.img`
    height: 50px;
    margin: auto !important;
    margin-top: 30px !important;
  `;
  
  const gobackHome = () => {
    localStorage.removeItem('projectPath');
    Router.push('/');
  };
  
  const goToBuild = () => {
    Router.push('/build');
  };
  
  const goToPosts = () => {
    Router.push('/project');
  };
  
  const goSettings = () => {
    Router.push('/settings');
  };
  
  const Sidebar = () => (
    <StyledSidebar vertical>
      <Menu.Item>
        <Logo src="/static/logo.png" />
      </Menu.Item>
      <Menu.Item onClick={goToPosts}>
        Posts
      </Menu.Item>
      <Menu.Item onClick={goToBuild}>
        Build website
      </Menu.Item>
      <Menu.Item onClick={goSettings}>
        Settings
      </Menu.Item>
      <Menu.Item onClick={gobackHome}>
        Change project
      </Menu.Item>
    </StyledSidebar>
  );
  
  export default Sidebar;
  