title: Hide menu-items from navigation using JS
body: <p>I want to hide some menu from the navigation if the user role is <em>User</em> and show all menu to the <em>Admin</em>.
  I want to hide <em>User</em> <em>SSO Mapping</em> and <em>Log</em> from the user.</p>
  
  <p>I am using the <em>OpenID Connect flask</em> for authentication.</p>
  
  <p>Can anyone help me in this?</p>
  
  <pre><code> &lt;div id="sidebar-wrapper"&gt;
          &lt;ul class="sidebar-nav"&gt;
              &lt;li&gt;
                  &lt;a href="dash.html"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Profile&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Change Password&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a class="dropdown-btn"&gt;User
                      &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
                    &lt;/a&gt;
                    &lt;div class="dropdown-container"&gt;
                      &lt;a href="#"&gt;View Users&lt;/a&gt;
                      &lt;a href="#"&gt;Add User&lt;/a&gt;
                      &lt;a href="#"&gt;Manage Role&lt;/a&gt;
                    &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Log&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;SSO Mapping&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Login History&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Support Guide&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>