비로그인 사용자에게 사이드바를 숨기는 방법?

지원
1

우리 사이트에는 #sidebar가 구성되어 있으며, 대부분 비공개 콘텐츠에 일부 공개 콘텐츠가 섞여 있습니다.

우리는 사이드바가 사용자가 로그인한 상태일 때만 활성화되기를 매우 원합니다(즉, anon 사용자에게는 표시하지 않음).

다음 CSS를 시도해 보았습니다:

// hide sidebar from non-logged in users (stuffs up layout unfortunately)
.anon {
    .sidebar-wrapper, .header-sidebar-toggle {
        display: none;
   }
}

이 CSS는 사이드바를 숨기지만, 사이드바 레이아웃은 그대로 남아 있습니다(그리고 모양이 좋지 않습니다). 더 나은 방법이 있을까요?

새로운 헤더 드롭다운 뷰(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

정말 대단하세요!

감사한 마음을 담아 Customization > Theme component 로 패키징했습니다: