Skip to content

UI/UX and Mobile interface

Description

The back arrow button (←) is currently positioned separately below the header. It should be integrated into the header bar next to the eHRS logo for a cleaner, more consistent navigation experience.

Current State

  • Back arrow displayed as separate element
  • Located below the main header bar
  • Takes up extra vertical space
  • Inconsistent with main navigation

Desired State

  • Back arrow integrated into header bar
  • Positioned on LEFT side next to eHRS logo
  • Format: ← eHRS | icons (all in one header line)
  • Cleaner visual hierarchy
  • Better space utilization

Visual Change

Implementation Details

Header Structure

<header class="header">
  <button class="header__back" aria-label="Go back">←</button>
  <div class="header__logo">eHRS</div>
  <div class="header__icons">
    <button class="header__icon">[globe]</button>
    <button class="header__icon">[moon]</button>
    <button class="header__icon">[☰]</button>
  </div>
</header>

CSS

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--header-bg); /* Dark theme color */
  border-bottom: 1px solid var(--border-color);
}

.header__back {
  font-size: 20px;
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__back:hover {
  opacity: 0.8;
}

.header__logo {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-right: auto;
}

.header__icons {
  display: flex;
  gap: 0.5rem;
}

Mobile Behavior

  • Back arrow always visible on all screen sizes
  • Touch target: 44x44px minimum
  • Smooth click/tap feedback
  • Works on all pages with navigation

Affected Pages

  • All dashboard pages
  • All sub-pages with back navigation
  • Form pages
  • Detail pages

Acceptance Criteria

  • Back arrow appears in header bar (left side next to eHRS)
  • Works on all pages with back navigation
  • Touch target: 44x44px minimum
  • Visible on mobile, tablet, desktop
  • Responsive and functional
  • No overlapping with logo or other elements
  • Click/tap triggers back navigation
  • Dark theme colors maintained
  • Tested on all breakpoints (320px+)
  • No visual regressions

Testing

  • Mobile (320px-480px) - back button visible and clickable
  • Tablet (640px-1024px) - proper spacing
  • Desktop (1024px+) - aligned correctly
  • Dark theme colors preserved
  • All pages with back navigation tested
  • No broken styles

Related Issues

#[container-standardization] #[mobile-optimization]

Labels: type::improvement priority::high component::frontend ui::header ui::navigation

Milestone: v1.0.0

Weight: 2