Why my sidebar is on the top of the page?

[ruanqizhen]

I create a new site by just running command npx create-docusaurus@latest website classic.

I can see the new site with yarn start, but it has some layout problems, the major one is that the sidebar is not on the side, but on the top of the page:

Any idea how to fix this?

[Josh-Cena]

Hi, in case it's a compatibility problem, could you give your browser version? It seems some style sheets were not loaded (my guess)—have you tried reloading / restarting the dev server?

[ruanqizhen]

This is mine:

[ruanqizhen]

I found the problem. There is some special characters (space, parentheses) in my project path. After moving my project to a simple folder like "c:\projects", everything looks good.

[slorber]

Oh I see thanks for letting us know.
We have seen similar issues in the past for some windows users.
Can you please give us the path you used before so that we can reproduce this issue more consistently? Eventually add a test for it

[ruanqizhen]

Yes, this was my project path: C:\Users\ruanqizhen\Dropbox (Personal)\Documents_qq\github\

[slorber]

Thanks for those details.

I can't reproduce on macOS, so it's probably related to your env.
Have you tried using another terminal (afaik there are many options for Windows).

If a contributor is willing to handle this issue, let me know. This seems related to how CSS module classnames are generated, cf the screenshots above. We use css-loader with localIdentName: '[local]_[path][name]' (removing [path] probably works, but do we want to?)

IMHO this issue could totally be related to the usage of Dropbox. Please move the project outside of dropbox, but keep a space in the name to be sure if it's related or not. Not sure it's a good idea to put your projects in Dropbox, considering node_modules would end up being uploaded to your dropbox account.