Controlling Localization Switcher visibility in Payload Admin UI (per role / per collection)

kento105 months ago

2

• 

  _elmgren5 months ago

  Currently Payload doesn't have a built-in way to conditionally show/hide the locale switcher

  
  
  

  Isn't [filtering available locales](

  https://payloadcms.com/docs/configuration/localization#filter-available-options

  ) sufficient?

  
  
  

  To hide it completely I'd suggest a new prop in the config to the Payload team.

  
  
  

  A workaround I can think of would be to add some simple css in

  custom.scss

  to hide it. For example:

  
  

  .payload-localizer-wrapper[data-user-role="service-provider"] .localizer,
  .payload-localizer-wrapper[data-user-role="client"] .localizer {
    display: none;
  }

  
  
  

  And then create a JSX component, maybe a provider and inject the

  data-user-role

  attribute on the body.

  
  
  

  export const LocalizerControlProvider = ({ children }) => {
    const { user } = useAuth()
    
    return (
      <div className="payload-localizer-wrapper" data-user-role={user?.role}>
        {children}
      </div>
    )
  }

  
  
  

  Add this via

  admin.components.providers

  in your config.

  
  
  

  Just some pseudo code, you can change the data attributes and values accordingly, for example extract what collection the user currently is visiting and updating accordingly

• 

  kento104 months ago

  Thank you! that’s exactly what I needed 🙏

  
  

  I hadn’t thought about using a data attribute + CSS, but that’s actually a really elegant approach.

  
  

  With this workaround, the localization problem is completely solved for my use case. Thanks a lot for the idea and the clear explanation!