"make sure sidebar and pusher are direct children of your body tag". They do

[smartm0use]

Everytime I run my application I have the following errors in the console:

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 <div class=​"ui vertical sidebar borderless menu left" id=​"main-sidebar">​…​​

Having a look a the source I have this:

So, what could be wrong with my code?

[lubber-de]

Do you happen to initialize the sidebar with a different context setting? Telling from the sidebar.js the mentioned error does only occur if the pusher element is not found as a child of the context setting (which is body by default)

Otherwise your HTML looks fine, please provide a jsfiddle including your JS code for easier investigation.

[smartm0use]

Sorry, it is hard for me replicate it using jsfiddle, since I'm using sidebar in my Angular app.
Anyway I initialize it using this:

$('#main-sidebar')['sidebar']('attach events', '.toc.item');

Here is the globar header code in which I do it:

<div class="pusher">
    <div class="ui borderless menu">
        <a class="toc item">
            <i class="sidebar icon"></i>
        </a>
        <div class="header item">
            <img class="ui image" src="/assets/myImage.png">
            <h2>My App</h2>
        </div>

        <a class="item">First</a>
        <a class="item">Second</a>
        <a class="item">Third</a>
        <a class="item">Fourth</a>
    </div>
</div>

Is this initialization setting a different context?

[lubber-de]

This looks fine, but the pusher Element might be changed by angular in some way so it isn't a direct children of body anymore. (You may check the Dom with devtools )
Again, without a reproducable example we are not really able to support, especially if other libraries are involved. Using raw fui without angular works with your code as expected. :(

[smartm0use]

I will try to have a reproducible example. In the meanwhile here is how the DOM changes before I open the sidebar and after I pressed the toggle button.

Could you get any hint from this?

[smartm0use]

Maybe I have a working Angular reproducible example:

https://stackblitz.com/edit/angular-uszhcl

Please have a look at it.

[lubber-de]

@smartm0use Thanks for the example, which i fixed for you here:
https://stackblitz.com/edit/angular-zeua4n?file=src%2Fapp%2Fapp.component.ts

Two issues were fixed:

• As guessed, your selector was set to my-app, which created a new parent node my-app instead of body
  -> Fixed by changing the selector to body
• You defined the pusher BEFORE the sidebar instead vice versa as recommended in https://fomantic-ui.com/modules/sidebar.html#page-structure
  -> Fixed by changing DOM node order : First sidebar, then pusher

[smartm0use]

In Angular I have to go for components, so for a component I can't use body as selector.

So, I can't fix it :(

Maybe I could set silent option to true. How to do that since I initialize the sidebar with attach events as described above?

[lubber-de]

You can initiate the sidebar with config settings, then attach your events

        $('#main-sidebar')['sidebar']({
          silent: true
        });
        $('#main-sidebar')['sidebar']('attach events', '.toc.item');

See https://stackblitz.com/edit/angular-gbha7b?file=src%2Fapp%2Fapp.component.ts