Link 1
    
Link 2
    
Link 3
    
Link 4
    
Link 5
  

Как выглядит боковая панель, когда она отображается?

Боковая панель должна располагаться справа от окна. После появления сайдбар нужно зафиксировать на месте, чтобы пользователь его увидел. Зададим ширину панели в 300 пикселей.

CSS-код будет выглядеть примерно так:

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 300px;
  background-color: #333;
}

.sidebar ul {
  margin: 0;
  padding: 0;
}

.sidebar li {
  list-style: none;
}

.sidebar li + li {
  border-top: 1px solid white;
}

.sidebar a {
  display: block;
  padding: 1em 1.5em;
  color: #fff;
  text-decoration: none;
}

Как выглядит боковая панель, когда она скрыта?

Боковая панель должна быть сдвинута на 300 пикселей вправо, чтобы исчезнуть с экрана. Чтобы научиться думать как программист, необходимо также дробить вопросы в ходе решения. Например, сейчас мы можем разбить проблему еще на 2 элемента:

1. Как узнать, отображается или скрыта боковая панель?
2. Как создать скрытую боковую панель?

Ответим на них.

Как узнать, отображается или скрыта боковая панель?

Если сайдбару присвоен класс .is-hidden, он должен быть скрыт от просмотра. В противном случае панель должно быть видно.

Как создать скрытую боковую панель?

Используем translateX для смещения боковой панели на 300 пикселей вправо, так как transform является лучшим вариантом для анимации. Стили выглядят следующим образом:

.sidebar.is-hidden {
  transform: translateX(300px);
}

Как появляется боковая панель?

Боковая панель не может просто возникнуть. Она двигается с правой стороны, где находится до нажатия кнопки. Если вы разбираетесь в CSS, можете реализовать transition. В противном случае используйте Google для поиска решения.

.sidebar {
  /* other properties */
  transition: transform 0.3s ease-out;
}

Как боковая панель исчезает?

Это просто обратное появлению действие. При этом вам не нужно писать дополнительный код CSS.

Должна ли боковая панель появляться при загрузке страницы?

Нет. Учитывая то, что мы используем класс is-hidden в разметке сайдбара, из-за чего он должен быть скрыт до нажатия кнопки.

Теперь мы ответили почти на все вопросы, кроме одного – что происходит, когда кнопку нажимают один раз? Дважды? Три раза?

Наш ответ выше был слишком расплывчатым. Мы знаем, что боковая панель должна появиться, когда вы нажимаете кнопку, но как? Боковая панель должна исчезнуть, когда вы нажмете снова, но как?

Как узнать, что кнопка нажата?

К кнопке можно добавить слушателя событий, который будет «отлавливать» клик. Но перед этим найдите кнопку с помощью querySelector:

const button = document.querySelector('.btn')

button.addEventListener('click', function() {
  console.log('button is clicked!')
})

Что происходит, когда кнопка нажата один раз?

Когда произведено первое нажатие, мы должны убрать is-hidden. Чтобы сделать это в JavaScript, используем Element.classList.remove. Это означает, что сначала нужно выбрать боковую панель.

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function() {
  sidebar.classList.remove('is-hidden')
})

Что происходит, когда кнопка нажата во второй раз?

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

К сожалению, слушатель событий не предоставляет возможность отслеживать, сколько раз была нажата кнопка. Лучший вариант отслеживания – проверять наличие is-hidden в сайдбаре. Если есть - удаляем. Если нет – добавляем.

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function() {
  if (sidebar.classList.contains('is-hidden')) {
    sidebar.classList.remove('is-hidden')
  } else {
    sidebar.classList.add('is-hidden')
  }
})

Также вы всегда можете вернуться к визуальному представлению нашего решения.

Шаг 4. Рефакторинг и улучшение

Чтобы научиться думать как программист, нельзя исключать и четвертый шаг, в котором обобщены наши решения. Последний этап – это рефакторинг и улучшение написанного кода. Но если вы новичок, то можете сразу и не понять, как улучшить код. Понимание придет только с опытом и практикой.

Важно, чтобы после трех предшествующих шагов вы сделали перерыв и поработали над каким-то другим проектом. Когда вы лучше освоите JavaScript и вернетесь к данной работе, то сможете заметить, что упустили несколько деталей.

В приведенном выше примере можно выделить дополнительные вопросы:

1. Как сделать компонент боковой панели более доступным для пользователей с нарушениями зрения?
2. Как изменить сайдбар так, чтобы он стал удобным для людей, использующих клавиатуру?
3. Можно ли еще как-то улучшить код?

Если вы хорошо изучили литературу или пользовались поисковиком в ходе решения задачи, то успели заметить, что для третьего пункта можно использовать метод toggle. Он удаляет класс, если тот присутствует. В противном случае метод toggle его добавляет:

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function() {
  sidebar.classList.toggle('is-hidden')
})

Выводы

Думать как программист несложно. Важно знать, как разбить основную проблему на более мелкие. Когда произведете дробление, поэтапно ответьте на каждый из отдельно взятых вопросов и реализуйте решения в коде. В процессе реализации программы вы можете столкнуться с рядом других вопросов. Не игнорируйте: решите и их тоже.

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

Думать как программист – это также искать пути улучшения. Помните, что программу всегда можно улучшить: изменить структуру, сделать код более «читабельным», убрать все лишнее. Но чтобы понять, где именно можно осуществить апгрейд, сделайте перерыв в работе: по возвращении к проекту вы сможете увидеть больше вариантов решения.

Код решения

HTML

Click me!

  

    
Link 1
    
Link 2
    
Link 3
    
Link 4
    
Link 5
  

CSS

.btn {
  display: inline-block;
  font-size: 2em;
  padding: 0.75em 1em;
  background-color: #1ce;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 300px;
  background-color: #333;
  transition: transform 0.3s ease-out;
}

.sidebar.is-hidden {
  transform: translateX(300px);
}

.sidebar ul {
  margin: 0;
  padding: 0;
}

.sidebar li {
  list-style: none;
}

.sidebar li + li {
  border-top: 1px solid white;
}

.sidebar a {
  display: block;
  padding: 1em 1.5em;
  color: #fff;
  text-decoration: none;
}

JavaScript

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function () {
  sidebar.classList.toggle('is-hidden')
})