[FEATURE]: Training Flow Layout

[dwu359]

Feature Name

Training Flow Layout

Your Name

Daniel Wu

Description

Problem
We want to redesign the layout of the trainspace page so that it's more intuitive and easier to navigate for the user.

Approach

https://www.figma.com/file/izZAPSl3JiDY7Hfj90qFMn/Training-Flow-Layout?type=design&node-id=0%3A1&mode=design&t=2BbqC5aiUfzcoOCt-1

1. Create a new page and name the train route train2.
2. Make a sidebar. The sidebar should have a fixed width, but should take up all of the height.
3. Make a menu bar. The menu bar should attach to the bottom of the nav bar and take up the entire width from the sidebar to the edge of the page and should also have a fixed height.
4. Make a draggable list of blocks. I recommend looking at the Sortable component of Dnd Kit to implement this, but there are definitely other libraries that can do this too. Don't worry about the implementation of a block yet, that can be done in seperate PRs. For now, blocks can just be replaced with placeholder components.
   Any other considerations
   Remember to follow Material Design standards, since we use MUI for our ui design tool.

[github-actions]

Hello @dwu359! Thank you for submitting the Feature Request Form. We appreciate your contribution. 👋

We will look into it and provide a response as soon as possible.

To work on this feature request, you can follow these branch setup instructions:

1. Checkout the main branch:

```
 git checkout nextjs
```

2. Pull the latest changes from the remote main branch:

```
 git pull origin nextjs
```

3. Create a new branch specific to this feature request using the issue number:

```
 git checkout -b feature-1072
```

Feel free to make the necessary changes in this branch and submit a pull request when you're ready.

Best regards,
Deep Learning Playground (DLP) Team