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

Поддержка
1

Мы настроили sidebar на нашем сайте: он в основном приватный, с небольшим количеством публичного контента.

Мы очень хотим, чтобы сайдбар был активен только для авторизованных пользователей (то есть не отображался для anon).

Я пробовал такой CSS:

// скрыть сайдбар у неавторизованных пользователей (к сожалению, ломает верстку)
.anon {
    .sidebar-wrapper, .header-sidebar-toggle {
        display: none;
   }
}

Это действительно скрывает сайдбар, но его разметка остаётся (и выглядит не очень хорошо). Есть ли лучший способ?

Я знаю, что можно переключиться на новое представление «Выпадающее меню заголовка» (в разделе navigation_menu) и настроить его так, но нам очень хотелось бы, чтобы сайдбар был виден авторизованным пользователям (без клика), если это возможно.

2

Здравствуйте,

С помощью этого вы можете скрыть боковую панель для анонимных пользователей. :slightly_smiling_face:

Общие / CSS

html.anon {
  // Скрыть узкую боковую панель для десктопа
  // Мобильная версия боковой панели, которая активна на десктопе при ширине менее 1000px
  .d-header .hamburger-panel {
    display: none;
  }
  // Скрыть накладку заголовка при открытии меню
  .header-cloak {
    display: none !important;
  }
}

Десктоп / CSS

html.anon {
  // Если боковая панель открыта, использовать стиль закрытого состояния
  body.has-sidebar-page {
    #main-outlet-wrapper {
      grid-template-columns: 0 minmax(0, 1fr);
      gap: 0;
      padding-left: 10px;
    }
    .wrap {
      max-width: var(--d-max-width);
    }
  }
  // Скрыть кнопку гамбургера
  .header-sidebar-toggle {
    display: none;
  }
}

Мобильное / CSS

html.anon {
  // Скрыть кнопку гамбургера
  .d-header-icons {
    .header-dropdown-toggle {
      &.hamburger-dropdown {
        display: none;
      }
    }
  }
}
3

Вы — настоящий легенда!

Чтобы выразить свою благодарность, я упаковал это как #theme-component: