title: Using Semantic-UI's fixed menu and sidebar in React
body: <p>I'm trying to use Semantic-UI's fixed menu and sidebar together with the React framework. I would like to achieve the same results as the Semantic-UI's Docs page (in Tablet and Mobile displays) with a fixed menu at the top and a left sidebar that is overlaid when toggled.</p>
  
  <p>I have put together an example of that here:
  <a href="https://jsfiddle.net/bullwinkle/m3hr5v36/" rel="nofollow noreferrer">https://jsfiddle.net/bullwinkle/m3hr5v36/</a></p>
  
  <p>It works, but Semantic-UI doesn't like the layout, and provides the following errors in console:</p>
  
  <pre><code>Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusher element
  Sidebar: Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag &lt;div class=​"ui inverted left vertical sidebar menu" data-reactid=​".0.0"&gt;​…​&lt;/div&gt;​
  </code></pre>
  
  <p>So Semantic-UI moves the layout around so that <code>.sidebar</code> and <code>.pusher</code> are direct children of <code>&lt;body&gt;</code>. That's not exactly the React way.</p>
  
  <p>As explained here:</p>
  
  <p><a href="https://stackoverflow.com/questions/31495447/semantic-ui-sidebar-throws-console-errors-with-reactjs-when-render-app-to-body">Semantic UI sidebar throws console errors with ReactJS when render app to body</a></p>
  
  <p>you would need to define a custom context for the sidebar. OK, so I've done that in the sidebar initialization:</p>
  
  <pre><code>componentDidMount() {
      $('.ui.sidebar').sidebar({
          transition: 'overlay',
          context: $('#layout')
      });
  },
  </code></pre>
  
  <p>(see the 4th revision of the jsfiddle, I can't post more links because of low rep)</p>
  
  <p>That fixes the error messages, but now the top menu is no longer fixed, and the sidebar scrolls along with the content. I've tried everything I can to get Semantic-UI and React to play along nicely, but I'm obviously missing something</p>