Как в html и css сделать открытие saitbar по нажатию на логотип?

Чтобы реализовать открытие sidebar (панели навигации) при нажатии на логотип в HTML и CSS, вам потребуется использовать некоторые элементы и свойства.

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

<div id="sidebar" class="closed">
  <!-- Здесь находится содержимое sidebar -->
</div>

Здесь id="sidebar" задает уникальный идентификатор для вашего sidebar, который понадобится в CSS и JavaScript.

Затем вы можете создать HTML-структуру вашего логотипа с использованием тега <img> или иного подходящего элемента.

<div id="logo">
  <img src="logo.png" alt="Логотип" />
</div>

После этого вы можете добавить стили в CSS для вашего sidebar и логотипа. Ниже приведен пример CSS-кода для реализации эффекта открытия/закрытия sidebar:

#sidebar {
  width: 250px;
  height: 100vh;
  background-color: #f1f1f1;
  transition: 0.3s; /* Добавление плавного перехода */
  transform: translateX(-250px); /* Позиционирование сайдбара за пределами экрана */
}

#sidebar.open {
  transform: translateX(0); /* Показ сайдбара на экране */
}

#logo {
  cursor: pointer;
}

/* Добавление иконки для показа/скрытия сайдбара */
#logo img {
  width: 30px;
  height: 30px;
}

/* Анимация поворота иконки при открытии/закрытии сайдбара */
#logo img.rotate {
  transform: rotate(180deg);
}

Теперь вам потребуется JavaScript для обработки события клика на логотип и добавления/удаления класса "open", чтобы показать/скрыть sidebar и изменить иконку на логотипе:

document.getElementById("logo").addEventListener("click", function() {
  var sidebar = document.getElementById("sidebar");
  var logoImage = document.querySelector("#logo img");
  
  sidebar.classList.toggle("open"); // Переключение класса "open" при каждом клике
  
  // Добавление класса "rotate" для поворота иконки логотипа
  if (sidebar.classList.contains("open")) {
    logoImage.classList.add("rotate");
  } else {
    logoImage.classList.remove("rotate");
  }
});

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

Обратите внимание, что данный пример использует чистый HTML, CSS и JavaScript. Однако, в зависимости от ваших потребностей и используемого фреймворка, вы можете найти готовые решения или использовать библиотеки для реализации аналогичного функционала.