Nice tool to moderate bad posts on a Forem
Tags: javascript, forem
Published: 2022-09-03 12:23:52

Hello ! I know, weird title, you are confused about that and don't worry. 

## Introduction
Small presentation of me, my name is Thomas, 23 years old, and I'm a mod on this **AWESOME** community named dev.to since 3 years now 💚🌱

I'm also a volunteer mod at [VscodeTips](https://community.vscodetips.com/) and [CodeNewbie](https://community.codenewbie.org/). Don't hesitate to check these communities! 

When you are a mod on a Forem community, you are a sidebar panel to upvote/downvote the content of any posts. Add/remove **#tags**, and report if the content as a spam or other content against the _Code of Conduct_.

![Sidebar to moderate the posts for Mods
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6h4gvqng8pnebjgveid.png)

[🤔 What is Forem ? →](https://www.forem.com/) 

___

## The tool in question

When you see the post, the sidebar mod panel is not open by default. So I wanted to create a **simple script in JavaScript** with the [Tampermonkey extension](https://www.tampermonkey.net/) so that the sidebar panel opens when the post page is loaded. ✨

## How it works

I searched directly into the code source of Forem to detect how the panel open when we click on this button


![A button when you click, he open the sidebar mod panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ca07613wgldznbgymi7f.png)

And I found [this piece of code](https://github.com/forem/forem/blob/main/app/javascript/actionsPanel/initializeActionsPanelToggle.js#L19), the function to **toggle** the sidebar mod panel ! 😎

```js
function toggleModActionsMenu() {
    document
      .getElementById('mod-actions-menu-btn-area')
      .classList.remove('hidden');
    document
      .getElementsByClassName('mod-actions-menu')[0]
      .classList.toggle('showing');

    // showing close icon in the mod panel if it is opened by clicking the button
    const modContainer = document.getElementById('mod-container');
    const panelDocument = modContainer.contentDocument;

    if (panelDocument) {
      const closePanel = panelDocument.getElementsByClassName(
        'close-actions-panel',
      )[0];

      closePanel && closePanel.classList.remove('hidden');
    }
  }
```

After seen that, I created the Tampermonkey file :

```js
(function() {
    'use strict';
// Get the element with this ID and remove the class 'hidden'
document
      .getElementById('mod-actions-menu-btn-area')
      .classList.remove('hidden');
// Show the sidebar mod menu 
    document
      .getElementsByClassName('mod-actions-menu')[0]
      .classList.toggle('showing');
})();
```

## Open Source 💚

Come on and becomes de **Open Sourcerer** ! This code source is published, and any user can contribute ! 🧙🏼‍♂️

I particularly thank @andypiper for fixing the link to install this script on Tampermonkey and typography. 🤩🚀

{% embed https://github.com/devtotools/open-sidebar-mod-menu %}



___

|☕|Check my [Twitter account](https://twitter.com/thomasbnt_). You can see many projects and updates. You can also [support me on Buy Me a Coffee, Stripe or GitHub Sponsors](https://thomasbnt.dev/donate). Thanks for read my post ! 🤩|
|---|---|