This task is about create a new reduced version of the side menu, which will be used for small app sizes.
1. Concept:
-The small side menu will be olny a thin strip with the main icons. -When hovering the strip, the full side menu appears. -The full side menu is displayed over the content in this mode. -The full side menu disapear when the mouse is out of the side menu. -A sliding animation is used when the side menu open and closes.
2. Reduced side menu: In the reduced mode, the strip only displays:
Main icons: Sound lib / projects / plugins / create new / logout / task number (if any)
68 px wide
Reduced "create" icon: The "create new" icon should be a circle with the "+" icon in the center. the circle should have the same color and shadow as the button in full size. the circle should have 30 px diameter
Reduced task number: Here it displays only the circle which appears when tasks are processed:
3. Responsive layout. The small side menu shall be active whe the app reaches 850 px width. The minimal app width should be updated to be 600 px
Comments
Pierre henri Seylan on October 24, 2019:
1. Concept:
-The small side menu will be olny a thin strip with the main icons.
-When hovering the strip, the full side menu appears.
-The full side menu is displayed over the content in this mode.
-The full side menu disapear when the mouse is out of the side menu.
-A sliding animation is used when the side menu open and closes.
This mechanism is very similar to the gmail side menu, see the video below:
https://www.dropbox.com/s/8rd61ie29fte7i7/reduced%20side%20menu%20gmail.mov?dl=0
2. Reduced side menu:
In the reduced mode, the strip only displays:
Reduced "create" icon:
The "create new" icon should be a circle with the "+" icon in the center.
the circle should have the same color and shadow as the button in full size.
the circle should have 30 px diameter
Reduced task number:
Here it displays only the circle which appears when tasks are processed:
3. Responsive layout.
The small side menu shall be active whe the app reaches 850 px width.
The minimal app width should be updated to be 600 px