# Sidebar User Field Toggle

**URL:** https://meta.discourse.org/t/sidebar-user-field-toggle/257634
**Category:** Theme component
**Created:** [March 9, 2023, 6:07pm UTC](https://meta.discourse.org/t/sidebar-user-field-toggle/257634 "2023-03-09T18:07:19Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![kinetiksoft](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kinetiksoft/32/229578_2.png) [@kinetiksoft](https://meta.discourse.org/u/kinetiksoft)
#### Post date: [March 9, 2023, 6:17pm UTC](https://meta.discourse.org/t/sidebar-user-field-toggle/257634/2 "2023-03-09T18:17:51Z")

</div>

Thank you, @Lhc_fl, for quick and quality solution.

Our use case is based on our [marketplace request’s description](https://meta.discourse.org/t/user-custom-field-toggle-for-sidebar-sfw-mode/257342):

The idea was inspired by [Our solution for blurring NSFW content](https://meta.discourse.org/t/our-solution-for-blurring-nsfw-content/124584), we just started by inverting the logic and needed a toggle for our community to blur & unblur media.

Just add **Custom User Field** as a **Checkbox** and follow our approach below.

We use **Sidebar User Field Toggle** with additional custom component like so:

1. Create new theme component right within your admin dashboard  
/admin/customize/ → Components → Install → Create new (component)
2. Add CSS:

> **CSS**
>
> ```css
> /* display nsfw blur and overlay text on any media in #nswf topics */
> .nsfw-hide { 
> .topic-body .cooked img:not(.emoji):not(.avatar), 
> .topic-body .cooked iframe, 
> .topic-body .cooked .lazyYT-container,
> .topic-body .cooked .video-container,
> .topic-thumbnail img:not(.emoji) {
> filter: blur(10px);	
> -webkit-transition: .3s ease-in-out;
> transition: .2s ease-in-out;
> }
> 
> .topic-body:hover .cooked img:not(.emoji), 
> .topic-body:hover .cooked iframe,
> .topic-body:hover .cooked .lazyYT-container,
> .topic-body:hover .cooked .video-container,
> .topic-thumbnail:hover img:not(.emoji) {
> filter: blur(0);	
> -webkit-transition: .3s ease-in-out;
> transition: .2s ease-in-out;
> }
> 
> .topic-body .cooked a.lightbox:before, 
> .topic-body .cooked iframe:before,
> .topic-thumbnail a:before {
> z-index:2;
> padding: 5px;
> font-size:1em;
> position:absolute;
> 
> color:#fff;
> content: '👀 Hover to show';
> background: #e86800;
> }
> 	
> .topic-body .cooked a.lightbox:before, 
> .topic-body .cooked iframe:before {
> top: 15px;
> left: 10px;
> }
> 
> .topic-thumbnail a:before {
> top: 65px;
> left: 20px;
> }
> 	
> .topic-body .cooked a.lightbox:hover:before, 
> .topic-body .cooked iframe:hover:before,
> .topic-thumbnail a:hover:before,
> .topic-body .cooked .video-container:hover:before {		
> display:none;
> }
> }
> 
> ```

1. Add JS (Head):

> **JS Code**
>
> ```js
> <script type="text/discourse-plugin" version="0.8.7">
> const { userPath } = require("discourse/lib/url");
> const { ajax } = require("discourse/lib/ajax");
> 
> const you = api.getCurrentUser();
> 
> if (you) {
> ajax(userPath(`${you.username_lower}.json`)).then((res) => {
> api
> ._lookupContainer("model:site")
> .appEvents.trigger("sidebar_user_fields_toggled", {
> user_fields: res.user.user_fields,
> });
> });
> }
> // https://meta.discourse.org/t/css-classes-for-group-membership-for-simplified-ui-mode/60838/2
> 
> api.onAppEvent("sidebar_user_fields_toggled", (status) => {
> if (window.jQuery) {
> window.jQuery(function ($) {
> if (status.user_fields[2] === "true") { // Or some else
> $('body').addClass('nsfw-hide' );
> } else {
> $('body').removeClass('nsfw-hide' );
> }
> });
> }
> });
> 
> </script>
> 
> ```

1. Just set up the toggle component’s buttons the way you want them to be. We use Custom User’s Field ID there as a reference.

P.S. It may be we could enter the same code into the Toggle’s component itself, but I just don’t bother to test it and why touch perfectly working code anyway?

➕ The @Lhc_fl’s component works within Dropdown navigation type perfectly too.

---

_[View the full topic](https://meta.discourse.org/t/sidebar-user-field-toggle/257634)._