Header section (Templatepage)

[SelinaBuff]

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.