Нажатие на изображение «выталкивает» остальную часть списка под изображением

Question

Я пытаюсь создать простой компонент списка, который отображает изображения при нажатии на заголовок. Для каждого заголовка вы можете открыть соответствующее изображение (изображения), которое прекрасно работает, но проблема в том, что остальные заголовки (список) помещаются под изображениями.

Желаемый результат должен состоять в том, что изображения отображаются справа от списка, не затрагивая список.

Я пытался разделить компонент на два компонента, поэтому, когда изображение вызывается в троичном операторе, помещая такой компонент, как <ProjectImage src={project.src} alt={project.altText}/>, но это, похоже, не решает проблему.

import {items} from '../ProjectInfo/projectObjects'


export class Sidenav extends Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: false, items: items};
    this.showProjectOnClick = this.showProjectOnClick.bind(this);
  }

showProjectOnClick(event){
const checkActive = this.state.items.id === items.id
const activeProject = {...event, active: !checkActive}
  this.setState(state => ({
    isToggleOn: !state.isToggleOn,
    activeProject
  }));
}

  render() {
    const {items} = this.state
    return (
          <div className="sidenav">
         {items.map((project) => {
           return ( <div className="Box" key={project.id}>
              <p className={this.state.isToggleOn && this.state.activeProject.id === project.id ? 'P_Color' : null}
                 onClick={() => {this.showProjectOnClick(project)}}><b>Project name: </b>{project.title}</p>
                {
                this.state.isToggleOn && this.state.activeProject.id === project.id 
                ? 
              <div className="ProjectImageBox">
                <img className="ProjectImage" src={project.src} alt={project.altText}/> 
              </div>
                : ''
                }
            </div>)
            })}
         </div>
    )
  }
}

Список проектов Текущий результат при нажатии заголовка Желаемый результат

Answer 1

Вы можете сделать это с помощью CSS.

.image{
  position: absolute;
  top: 0;
  right: 40px;
}

Но лучшим вариантом будет использование другого компонента и передача выбранного элемента этому компоненту. Это уменьшает количество компонентов, и вам просто нужно расположить их соответствующим образом. Я создал простой stackblitz , показывающий, как это работает.

Answer 2

Для этого вам необходимо установить абсолютное положение изображения, чтобы оно не занимало место в списке.

класс css должен быть следующим:

.image {
  position: "absolute";
  top: 0;
  left: "100%";
  /* the propreties below you can customize */
  width: "50px";
  height: "auto";
}