Overview
DrillerDB features a dual-navigation interface designed for desktop and mobile workflows. The application uses a collapsible sidebar navigation system alongside a top navbar, providing quick access to all major sections of the platform.
Sidebar Navigation
The primary navigation method in DrillerDB is the left sidebar, which provides access to all major sections. The sidebar can be toggled on or off using the hamburger menu icon in the top navbar. On desktop, the sidebar toggle button is located in the top-left corner. On mobile devices, the sidebar appears as an offcanvas panel that slides in from the left.
Sidebar Navigation
Main Navigation Sections
| Section | Icon | Description |
|---|---|---|
| Projects | Grid | Main project and proposal management |
| Pump & Service | Wrench | Work orders for pump installations and service calls |
| Scheduling | Calendar | Calendar, Gantt, and list views for job scheduling |
| Maps | Map Pin | Job locations, well maps, and pump installer mapping |
| Rolodex | Address Book | Customer, vendor, and contact management |
| Reports | File Text | Generate and view business reports |
| Stats | Bar Chart | Project statistics, timecard data, and inventory usage |
| Equipment | Truck | Equipment inventory, service logs, and maintenance tracking |
| Inventory | Box | Material inventory management and usage tracking |
| Daily Logs | Book | Field reports, tower logs, and daily activity tracking |
| Help | Question Circle | Documentation, support, and help resources |
Sidebar Behavior
The sidebar navigation adapts to your screen size and preferences:
- Desktop: Toggle the sidebar using the button in the top-left or the switch in the settings dropdown. The sidebar can remain persistent or collapse for more screen space.
- Mobile: Access the sidebar by tapping the hamburger menu. It slides in as an overlay and closes automatically after selecting a section.
- Tooltips: Hover over icons in the collapsed sidebar to see section names.
- Active State: The currently selected section is highlighted with a background color.
Top Navbar
The top navbar provides constant access to global features regardless of which section you're viewing:
Left Side
- Sidebar Toggle: Hamburger menu to show/hide the sidebar
- Company Logo: Click to return to the Projects section (home)
Center (when sidebar is hidden)
Quick-access navigation links to all main sections appear in the center of the navbar when the sidebar is collapsed.
Right Side
- Notifications: Bell icon with badge showing unread notification count
- User Profile: Dropdown menu with:
- Settings access
- User profile information
- Sidebar toggle switch
- Logout option
Section Switching
Navigating between sections in DrillerDB is instantaneous:
- Click any sidebar item to switch to that section
- Click the company logo to return to Projects
- Use browser back/forward buttons (URL hash changes)
- Direct links from notifications or search results
When you switch sections, the page content changes dynamically without reloading the entire application. Your place in the previous section is preserved, so returning to a section shows the last view you were working with.
Mobile vs Desktop Differences
Mobile Interface
- Sidebar appears as a slide-out panel (offcanvas)
- Navbar collapses into a hamburger menu
- Touch-optimized spacing for all navigation elements
- Automatic sidebar close after selection to maximize content area
- Swipe gestures not required - tap-based navigation
Desktop Interface
- Sidebar can remain visible alongside content
- More compact navigation spacing
- Hover tooltips on collapsed sidebar
- Persistent toggle button for sidebar control
- Multi-monitor support for extended workflows
Quick Tips
- Keyboard Navigation: Use Tab to navigate through sidebar items, Enter to select
- Breadcrumbs: The section header shows your current location and context
- Search Integration: Many sections include search bars that filter content in real-time
- Settings Badge: Hidden sections can be enabled in Settings
- Beta Environment: Beta testing sections may have a different background color or badge
Navigation Customization
Access Settings from the user dropdown menu to customize navigation preferences:
- Sidebar Toggle: Enable or disable persistent sidebar
- Section Visibility: Show or hide specific sections based on your role
- Default Landing Page: Set which section loads by default (typically Projects)
- Notification Preferences: Control which events trigger navigation badges
Accessibility Features
DrillerDB's navigation system includes:
- ARIA Labels: All navigation elements have descriptive labels for screen readers
- Keyboard Navigation: Full keyboard support with Tab, Enter, and Escape keys
- Focus Indicators: Clear visual indicators for keyboard focus
- Role Attributes: Proper semantic HTML with navigation roles
- Skip Links: Quick navigation to main content areas
The navigation system is designed to be intuitive whether you're managing a single project or coordinating dozens of field operations across multiple locations.