DocumentationGuides

Navigating the App

AbleTime uses a left sidebar for navigation, a main content area for the current page, and a Productivity Drawer on the right for quick access to your timer, tasks, and notifications.

The Navigation Sidebar

On desktop, the sidebar is always visible on the left side of the screen. At the top, the AbleTime logo links back to the Home page. A toggle icon next to the logo collapses the sidebar to show only icons, giving more space to the main content area. Hover over the collapsed sidebar to temporarily expand it.

Not all menu items are visible to every user. The items you see depend on your role and your organization’s enabled features. If a menu item mentioned in this documentation does not appear in your sidebar, check with your administrator.

Below the menu, the sidebar footer contains three items:

  • Your avatar — click to open a dropdown menu with:

  • – Your name and role displayed at the top.

  • – My Profile — opens your profile page.

  • – Settings — opens your account settings.

  • – Logout — signs you out and returns to the sign-in page.

  • FAQ — a link to the FAQ page and support request form.

  • Light Mode / Dark Mode — click to toggle between light and dark themes. The icon changes between a sun and moon to indicate the current mode.

When the sidebar is collapsed, only the icons for these items are shown.

Mobile Navigation

On smaller screens, the sidebar is hidden by default. A menu icon (three horizontal lines) appears in the top-left corner. Tap it to open the sidebar as an overlay. The sidebar can also be opened by swiping from the left edge of the screen.

The top bar on mobile shows the menu icon on the left and your avatar on the right. Tap the avatar to open the same dropdown menu described above. A sun or moon icon next to the avatar toggles light and dark mode.

You may see an alert banner at the top of the Home page with important notices.

Main Content Area

The main content area fills the space between the sidebar and the Productivity Drawer. Each page has its own toolbar or header at the top with page-specific controls such as filters, date pickers, view toggles, and action buttons.