匿名閲覧者に対してサイドバーを非表示にするにはどうすればよいですか？

サポート
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;
      }
    }
  }
}
「いいね！」 10
3

ありがとうございます！\n\n感謝のしるしに、これを Theme component としてパッケージ化しました。\n\nGitHub - nathan-nz/discourse-hide-sidebar-from-anon: Hides the sidebar from anonymous users

「いいね！」 5
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.