inovex/scrumlr.io

Header section (Templatepage)

Opened this issue · 1 comments

SelinaBuff commented

User Story 1: Header Section

Description:
As a user, I want a clear header section with a logo, user profile, title, a switch, and a search bar, so I can easily navigate the website and switch between template and session pages.

Acceptance Criteria:

  1. Header Structure:

    • The header section is divided into 3 levels:
      • Level 1: Logo and user profile
      • Level 2: Title
      • Level 3: Switch (template page & session page) and search bar

  2. Functionality:

    • Switch: Clicking on the switch should navigate to the respective page (template or session page).
    • Search Bar: The search bar should only search within the current page the user is on.

  3. Design and Layout:

    • The header section is designed as a complete component with auto-layout, and spacing can be referenced in Figma's DEV mode.
    • The header section should be responsive to different screen sizes.
    • All components should be available in both light and dark mode, and for both desktop and mobile.
    • There are specific states and a German version in the design.

User Story 2: User Menu

Description:
As a user, I want a user menu with a restricted settings dialog that shows the sections: Board Settings, Appearance, and Profile, along with a logout function, so I can manage my profile settings and log out securely.

Acceptance Criteria:

  1. User Menu:

    • Clicking on the user menu should open the settings dialog.
    • The settings dialog includes the sections: Board Settings, Appearance, and Profile.
    • By default, the 'Profile' settings section should be displayed.

  2. Logout Function:

    • A logout button should be displayed at the bottom left corner of the dialog window.
    • Clicking the logout button should redirect the user to the login screen.
    • The logout function should always remain in the same position in the settings dialog.

  3. Design and Layout:

    • The settings dialog and logout function are components with auto-layout in Figma and can be referenced in DEV mode.
    • Support light and dark modes.
    • Support both desktop and mobile.
    • Integrate existing design guidelines from Figma.

Image

Schwehn42 commented

For the Search Bar, I'll wait until there's actual content that can be searched for before implementation, but should be easy enough to add afterwards.