name: Feature request
about: Style the sticky-menu block to match the Tour Operator Design System from Figma
title: "[Feature request] Style Sticky Menu Block According to Figma Design System"
labels: enhancement, design, sticky-menu, figma
assignees: ''

Feature area

• Frontend display
• Tour management
• Booking system
• Admin interface
• Integrations
• Other: ___

Is your feature request related to a problem?

The sticky-menu block is functionally complete and working as expected, but it currently uses basic styling that doesn't match the visual design specifications outlined in the Tour Operator Design System Figma file. The current implementation relies heavily on CSS variables and minimal styling, which provides a functional but generic appearance that doesn't align with the project's design language.

Describe the feature

Update the sticky-menu block styling to match the visual specifications from the Tour Operator Design System Figma file. This includes:

• Visual Design Alignment: Apply typography, colors, spacing, and layout styles consistent with the design system
• Button/Link Styling: Update navigation button appearance, hover states, and active states to match Figma specifications
• Responsive Behavior: Ensure mobile and desktop layouts follow the design system patterns
• Visual Hierarchy: Implement proper visual weight and contrast according to the design specifications
• Interactive States: Apply appropriate styling for hover, focus, and active states as defined in the design system

The functional behavior should remain unchanged - this is purely a visual enhancement to align with the established design standards.

Use case

This enhancement will:

• Improve Visual Consistency: Ensure the sticky menu matches the overall design language of tour operator websites
• Enhance User Experience: Provide a more polished and professional navigation experience that aligns with user expectations set by other interface elements
• Maintain Brand Cohesion: Keep the navigation styling consistent with other Tour Operator blocks and components
• Support Design System Adoption: Demonstrate proper implementation of design system principles across all blocks

Describe alternatives you've considered

• Keep current basic styling: Would maintain functionality but miss the opportunity for visual consistency with the design system
• Theme-level customization: Would require individual themes to implement the styling, leading to potential inconsistency across different implementations
• Gradual enhancement: Could implement partial styling improvements, but a comprehensive update ensures better consistency

Additional context

The sticky-menu block was implemented in #684 with full functionality including:

• Automatic section detection and navigation
• Mobile collapsible sections
• Accessibility features (ARIA labels, keyboard navigation)
• Editor integration with visual indicators
• Desktop/mobile responsive behavior

Current Implementation Files:

• /src/blocks/sticky-menu/index.js - Main block registration and React components
• /src/blocks/sticky-menu/style.scss - Current basic styling
• /src/blocks/sticky-menu/block.json - Block configuration
• /src/blocks/sticky-menu/sticky-menu-editor-extension.js - Editor enhancements

Design Reference:

• Figma File: Tour Operator Design System
• Relevant Components: Navigation patterns, button styles, typography scales, color tokens

Code Snippets

// Current basic styling approach
.lsx-to-sticky-menu-button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

// Enhanced styling should follow design system patterns
.lsx-to-sticky-menu-button {
  // Apply design system typography, colors, spacing
  // Implement proper button styling from Figma specifications
  // Add design system-compliant hover/focus/active states
}

Acceptance Criteria

• Sticky menu visual design matches Figma Design System specifications
• Navigation buttons follow design system button patterns (typography, colors, spacing)
• Hover, focus, and active states are implemented according to design system guidelines
• Mobile and desktop layouts align with responsive design patterns from Figma
• All existing functionality remains intact (no regressions)
• Visual changes are implemented through theme.json integration and SCSS updates
• Cross-browser compatibility maintained across supported browsers
• Accessibility standards remain compliant (color contrast, keyboard navigation)
• Performance impact is minimal (no additional bundle size concerns)
• Code follows project SCSS/CSS coding standards
• Documentation updated if new CSS custom properties or styling hooks are added
• Visual regression testing completed to ensure design consistency

References

• Original Implementation: #684 - Sticky Menu Block
• Issue Reference: #496 - Original feature request
• Design System: Tour Operator Design System (Figma)
• Related Blocks: Other Tour Operator blocks that have already implemented design system styling
• WordPress Block Editor: Block Editor Handbook - Styling
• Accessibility: WCAG 2.1 Guidelines for navigation patterns