The interface
A tour of the ApexityEdu screens — top bar, sidebar, bottom navigation and common controls.
Once you sign in, the application opens in a single shell. Understanding its few fixed parts makes everything else easy.
The three-zone layout (desktop)
The signed-in app is arranged as:
- Ribbon — a thin accent strip along the very top.
- Top bar — a dark bar with the school name, search, your role chip, notifications, theme toggle and your avatar menu.
- Sidebar + content — a left navigation column and the main working area.
Top bar
| Item | What it does |
|---|---|
| Colophon / school name | Your school’s logo and name — confirms where you are. |
| Search | Global search (shown for staff roles). |
| Role switcher | Switch between your roles (if you have more than one). |
| Notifications | A bell showing recent activity. |
| Theme toggle | Switch between light and dark mode. |
| Avatar menu | Profile, settings, theme, and sign out. |
Sidebar
The sidebar groups navigation into sections such as Main, Academics and Admin. The item you are currently on is marked with an accent marker. Only the routes your role is allowed to see appear here.
Content area
Each screen begins with a page title and then shows its own content — tables, cards, forms, or charts. The content area has a maximum width for comfortable reading on large monitors.
Mobile layout
On a phone or narrow window:
- The sidebar is hidden. Instead you get a bottom navigation bar with up to four primary slots.
- A More sheet holds every other route your role can reach, plus utilities such as Profile, Settings, Theme and Sign out.
Common controls
These appear throughout ApexityEdu and work the same everywhere:
- Buttons — the accent (primary) button is for the main action; a danger button is used for deletions. Every destructive action asks you to confirm.
- Tables — data tables scroll sideways on small screens; numeric columns use tabular figures for easy scanning.
- KPI strips — rows of headline numbers (totals, percentages) shown with colour coding.
- Chips / status chips — small pill labels. Statuses use a consistent colour: green for present/paid/approved, amber for late/pending, red for absent/due/rejected, blue for leave/published.
- Drawers & modals — slide-in or centred panels for editing a record. They close with Escape or by clicking outside.
- Toasts — brief confirmation messages at the top-right (for example, “Saved”).
- Search boxes — filter lists as you type.
- Empty / loading states — screens show a skeleton while loading and a friendly empty state when there is no data, rather than a blank page.
Printing
Many documents (certificates, receipts, admit cards, profiles, routines) are printed straight from the browser. When you click a Print action, ApexityEdu prepares a clean, print-friendly version and opens your browser’s print dialog.
Preferences
From your avatar menu you can adjust density (comfortable or compact) and your theme (light or dark). The dark mode respects your device’s own setting the first time, then remembers your choice.