feat: header and sidebar improvement

[pionxzh]

closes #75

Changes

• Add Breadcrumb for repo page, dashboard page and profile page
• Foldable sidebar
• I have pushed Docs to the right side! (let me know if you don't like it)

Things we can discuss

• the position of Expand > button is weird
• Have a standalone HomePage
  • Automatically redirect logged-in user from / to /repos
  • Only /repos shows the "Dashboard" breadcrumb

Before

After

Expanded by default

Collapsed

Profile Page

Note:
In the original issue, the request is Codepod/{USERNAME}'s Profile
But I think it's duplicate information. So let's use CodePod / Profile 😄

Other pages who don't have a specific breadcrumb

Inrelevant Suggestions

• Prettier IDE integration?
• Windows developer might need some fix for file-watching

// ui/config-overrides.js
config.watchOptions = {
    ignored: /node_modules/,
    poll: true,
};

[lihebi]

Great PR, thanks Pionxzh!

[lihebi]

Prettier IDE integration?

Do you mean the prettier VSCode plugin for auto-formatting? It seems to only work with VSCode out-of-the-box, but not Monaco editor. We may be able to integrate it with some effort though.

The Monaco editor does support Command Palette and a basic version of formatting & indenting. You can press <F1> inside the editor to call out the Command Palette. Make the code editor bigger to see all the commands. One more thing, python has no auto-format command by default; you have to change it to e.g., javascript t see the command. Screenshot:

[lihebi]

• Windows developer might need some fix for file-watching

// ui/config-overrides.js
config.watchOptions = {
    ignored: /node_modules/,
    poll: true,
};

I don't have a Windows machine, but this looks reasonable to me. Can you submit a PR for it as well? Thanks!

[pionxzh]

Prettier IDE integration?

Do you mean the prettier VSCode plugin for auto-formatting? It seems to only work with VSCode out-of-the-box, but not Monaco editor. We may be able to integrate it with some effort though.

The Monaco editor does support Command Palette and a basic version of formatting & indenting. You can press <F1> inside the editor to call out the Command Palette. Make the code editor bigger to see all the commands. One more thing, python has no auto-format command by default; you have to change it to e.g., javascript t see the command. Screenshot:

Ah, yes. I using vscode. Actually I'm not sure should an open source project provide some IDE related configuration.
Instead, we can setup the precommit lint to make sure that you can only submit formatted code.

[pionxzh]

• Windows developer might need some fix for file-watching

// ui/config-overrides.js
config.watchOptions = {
    ignored: /node_modules/,
    poll: true,
};

I don't have a Windows machine, but this looks reasonable to me. Can you submit a PR for it as well? Thanks!

Sure