[LAYOUT-101] Header and Footer Display (Pre/Post Login)

[mehalyna]

🎯 Story Overview

As a
user of the CraftMerge platform,

I want to
see relevant navigation items in the header and consistent contact & legal info in the footer,

So that I can
navigate the platform easily and access information and services whether I'm logged in or not.

---

✅ Acceptance Criteria

🔼 Header (Before Login)

#	Criteria
1	Display logo (CraftMerge), navigation items: Про нас, Підприємства та сектори, Пошук
2	Include “Увійти” (Login) and “Зареєструватися” (Register) buttons aligned to the right
3	Ensure the header is fully responsive on mobile and desktop

🔒 Header (After Login)

#	Criteria
1	Hide “Увійти” and “Зареєструватися” buttons
2	Show user icon and label Мій профіль instead
3	Dropdown or link from Мій профіль should navigate to account settings or dashboard (not shown but implied)

---

⬇️ Footer (Always Visible)

#	Criteria
1	Display CraftMerge logo and organization information including address, phone, and email
2	Show navigation links grouped by category: Підприємства: Компанії, Стартапи Сектори: Виробники, Імпортери, Роздрібні мережі, HORECA, Інші послуги
3	Include legal links: Політика конфіденційності, Умови користування, Зворотній зв’язок
4	Display development credits: `Розроблено в OPENTECH
5	Footer content should be consistent across all pages

---

🖌️ UI/UX Notes

• Header and footer are fixed in design and must scale fluidly across viewports.
• Active state (e.g., when logged in) must be clearly distinguished.
• Use contrasting buttons for primary CTAs like "Зареєструватися".

---

🧪 Example Screens from Mockups

Area	State	Description
Header	Before Login	"Увійти" and "Зареєструватися" visible
Header	After Login	"Мій профіль" replaces auth buttons
Footer	Always	Consistent layout and sections shown

---

🔗 Dependencies

• Auth session state to determine if user is logged in
• User profile data (e.g., name/icon) for post-login header
• Static content management for footer legal links and contact info

---

📌 Navigation Summary

• 🔁 Header switches content dynamically based on login state
• ⬇️ Footer remains static across all pages and states

---

🔧 Sub-tasks for LAYOUT-101: Header and Footer Display (Pre/Post Login)

🛠 Header - Before Login

• LAYOUT-101-1: Implement CraftMerge logo component
• LAYOUT-101-2: Create and style top navigation menu:
  • Про нас
  • Підприємства та сектори
  • Пошук with input and icon
• LAYOUT-101-3: Add right-aligned action buttons:
  • Увійти (Login)
  • Зареєструватися (Register)
• LAYOUT-101-4: Ensure responsive layout for desktop and mobile views

---

🔐 Header - After Login

• LAYOUT-101-5: Detect login state from session/auth context
• LAYOUT-101-6: Hide “Увійти” and “Зареєструватися” if user is logged in
• LAYOUT-101-7: Show user profile icon with label Мій профіль
• LAYOUT-101-8: Link profile icon to dashboard or account settings (if route exists)

---

⬇️ Footer (Visible Always)

• LAYOUT-101-9: Implement static footer with:
  • CraftMerge logo
  • Company contact information
• LAYOUT-101-10: Group footer links:
  • Підприємства: Компанії, Стартапи
  • Сектори: Виробники, Імпортери, Роздрібні мережі, HORECA, Інші послуги
• LAYOUT-101-11: Add legal/policy links:
  • Політика конфіденційності
  • Умови користування
  • Зворотній зв’язок
• LAYOUT-101-12: Display credit line: Розроблено в OPENTECH | softserve
• LAYOUT-101-13: Ensure consistent footer display across all pages

---

🧪 QA & Testing

• LAYOUT-101-14: Test header behavior pre- and post-login (visibility logic)
• LAYOUT-101-15: Verify all navigation links work correctly
• LAYOUT-101-16: Test layout and responsiveness across devices and browsers
• LAYOUT-101-17: Ensure footer content is not impacted by routing or state changes

---

📄 Documentation

• LAYOUT-101-18: Document header/footer component structure and logic
• LAYOUT-101-19: Add layout behavior notes to internal design/UX guidelines