search

hiscoder-com / level

App to translate Scripture step by step
https://level.bible
MIT License
6 stars 4 forks source link

Make new sidebar #690

Closed Valyukhov closed 1 month ago

Valyukhov commented 1 month ago

Currently, the sidebar opens when clicking on the hamburger button. Image

After 1024px, a new sidebar needs to be added instead of the old one. Design Reference

Changes:

  1. Remove the hamburger button.

  2. Fix the sidebar to the left and make it full height of the screen.

  3. The sidebar should have two states — minimized and expanded.

    • When hovering over it with the mouse, it expands.
    • When the mouse leaves, the sidebar shrinks back to its minimized size.

  4. Menu items:

    • Account: Link to the page /account
    • Projects: Link to the page /account with the active tab Projects
    • Create Project: Only available to the admin role - Link to the page /account with the active tab Create Project

    Image

    • Notebook: Opens a notebook window on the right

      • Behavior: When the notebook window is open, the sidebar should not collapse to its minimized version. The notebook closes:
      • By clicking the "X" in the top right
      • By selecting any other menu item
      • By clicking outside the notebook area

    • Users: Only available to the admin role - Link to the page /users

    • Themes: Accordion that contains a list of existing themes (carry over the current implementation). The design shows incorrect circle colors; use the colors from the current code.

    • Language: Language switcher; transfer it as it is now and update its appearance if needed to fit the new design.

    • About: Opens a window on the right with the About description and the form that is already on the home page. The behavior of this window is the same as the notebook.

    • Version: Opens a window on the right with version details. By default, it shows only the current version, but clicking a button reveals all versions (this logic already exists, just adapt it to the new design).

    • Logout: Logs the user out of the account.

Additional Information:

  1. The sidebar should appear above all other windows.
  2. When the sidebar is open, the area around it should dim, similar to a modal window.
  3. Once the hamburger button is removed, align the logo to the left edge of the container.
  4. On certain screen widths (between 1025px and 1428px), there’s limited space for the sidebar. The container should be resized so the minimized sidebar doesn’t overlap the content.
  5. For mobile devices (up to 1024px), you need to leave the burger icon in the appbar, the behavior of opening/closing the sidebar and the width of the sidebar on the entire device screen.
  6. In mobile version need to delete menu with plus icon opened Image Image

Technical information:

  1. Change version in package.json - 0.25.0
  2. Change version in oce.json - 0.25.0
  3. Add in public/updateVersionInfo en: 
    
# Version 0.25.0
## Date: 10/03/2024 - _date for example_

Changed:

Modificado:

Изменено

Link to text in About: https://github.com/hiscoder-com/level/issues/688#issuecomment-2382599675 - en https://github.com/hiscoder-com/level/issues/688#issuecomment-2382600677 - ru https://github.com/hiscoder-com/level/issues/688#issuecomment-2382601719 - es