Skip to main content

Sidebar User Guide

Updated over 5 months ago

Welcome to the Sidebar of RentalTide! This guide will help you navigate and utilize all the features available on the Sidebar, ensuring efficient management and quick access to various sections of your organization's Point of Sale (POS) system.

Introduction

The Sidebar is a crucial navigational component within RentalTide's POS system, designed to provide users with quick and organized access to various sections of the application. It enhances user experience by categorizing functionalities, supporting favorite selections, and ensuring accessibility across different device sizes.

Key Features:

  • Organized Navigation: Group related sections for streamlined access.

  • Favorite Items: Pin frequently used sections for easy retrieval.

  • Responsive Design: Optimized for both desktop and mobile devices.

  • Permission-Based Access: Ensures users see only the sections they are authorized to access.

  • Integrated Command Bar: Access quick actions and commands directly from the Sidebar.

  • User Profile Access: Easily navigate to profile settings and account management.

Dashboard Overview

Upon integrating the Sidebar into your workflow, you'll encounter the following key components:

  • Organization Selector:

    • Functionality: Allows users to switch between different organizations or accounts they have access to.

  • Command Bar:

    • Functionality: Provides quick access to various commands and navigation shortcuts.

  • Sidebar Items:

    • Categories: Items are grouped into specific categories for better organization.

    • Icons: Each item is represented with an intuitive icon for easy identification.

    • Badges: Some items display badges indicating notifications or counts.

  • Footer Section:

    • Changelog: Access the latest updates and changes to the application.

    • Profile Button: Navigate to your profile settings and account management.

  • Responsive Drawer:

    • Desktop: A permanent drawer remains visible for constant access.

    • Mobile: A swipeable drawer provides access while conserving screen space.

Managing Sidebar Items

Efficiently navigate through your POS system using the Sidebar's organized structure. This section covers grouping, favoriting items, and utilizing action buttons.

Grouping and Categorization

Sidebar items are categorized into distinct groups to ensure organized navigation. Each group represents a specific domain or functionality within the POS system.

Primary Groups:

  1. Favorites:

    • Description: Contains items marked as favorites for quick access.

    • Behavior: Always displayed at the top for easy retrieval.

  2. Hub:

    • Description: Core functionalities central to business operations.

    • Items Include: Bookings, Calendar, Matrix, Customers, Weather, Reports.

  3. Galley (Point of Sale):

    • Description: POS-related functionalities.

    • Items Include: Point Of Sale, POS Transactions, Inventory Audit, POS Reporting, Accounts, POS Settings.

  4. Deckhand (Operations):

    • Description: Operational management functionalities.

    • Items Include: Boat Inventory, Maintenance, Carbon Footprint, Business Capital, Asset Tracking, Insurance.

  5. Shipyard (Marina Management):

    • Description: Marina and slip management functionalities.

    • Items Include: Slip Rentals, Slip Occupancy.

  6. Chartroom (Marketing):

    • Description: Marketing and promotional functionalities.

    • Items Include: Promo Codes, Affiliate, Email Templates, Text Templates, Campaigns.

  7. Websmiths (Website Management):

    • Description: Website and online presence management functionalities.

    • Items Include: DockBox, Manage Website, Website Plugin, Wordpress Plugin.

  8. Helm (User Management):

    • Description: User and subscription management functionalities.

    • Items Include: Manage Users, Subscription.

  9. Other:

    • Description: Any items that do not fit into the primary groups.

Usage Tips:

  • Consistent Navigation: Familiarize yourself with the groupings to navigate efficiently.

  • Expand/Collapse Groups: Click on a group header to expand or collapse its items for a cleaner view.

Favorite Items

Purpose: Allow users to pin frequently accessed sections for quick and easy navigation.

Managing Favorites:

  1. Toggling Favorites:

    • Add to Favorites: Click the heart icon next to a Sidebar item to add it to your favorites.

    • Remove from Favorites: Click the filled heart icon to remove it from your favorites.

  2. Accessing Favorites:

    • Favorites Group: All favorited items appear under the "Favorites" group at the top of the Sidebar.

Usage Tips:

  • Pin Essential Sections: Add the most-used sections to your favorites to enhance productivity.

  • Organize Favorites: Regularly update your favorites to reflect your current workflow needs.

Action Buttons

Purpose: Provide additional functionalities directly from the Sidebar.

Components:

  1. Add Store Button:

    • Icon: TbAdd

    • Functionality: Opens a modal to add a new store location.

    • Availability: Disabled when the maximum number of stores is reached or if the user lacks the necessary permissions.

    • Tooltip: Displays the action's purpose or limitations based on conditions.

  2. Profile Button:

    • Icon: TbUser

    • Functionality: Navigates to the user's profile settings and account management.

Usage Tips:

  • Contextual Actions: Use action buttons for tasks that require immediate attention without navigating away from your current view.

  • Permission Awareness: Ensure you have the necessary permissions to utilize specific action buttons to prevent access issues.

Responsive Design

The Sidebar is optimized for both desktop and mobile devices, ensuring a seamless experience across different screen sizes.

  1. Desktop View:

    • Permanent Drawer: The Sidebar remains visible, providing constant access to navigation items.

    • Full Access: Users can view and interact with all available Sidebar items without obstruction.

  2. Mobile View:

    • Swipeable Drawer: The Sidebar can be opened by swiping or tapping the toggle button, conserving screen space.

    • Accessible Actions: Even on smaller screens, all functionalities remain accessible through the swipeable interface.

Usage Tips:

  • Toggle Sidebar on Mobile: Familiarize yourself with the swipe gestures or toggle buttons to access the Sidebar effortlessly.

  • Optimize Layout: Use the responsive design to maintain productivity without compromising on access to essential features.

Permissions and Access Control

Access to various sections and functionalities within the Sidebar is governed by a robust permissions system, ensuring that users see only what they are authorized to access.

Key Permissions:

  • stores_access: Grants access to the Stores Page and its functionalities.

  • stores_add: Allows users to add new store locations.

  • stores_edit: Permits users to edit existing store locations.

  • stores_delete: Enables users to delete store locations.

  • stores_view_settings: Allows users to view and manage store-specific settings.

  • stores_view_stripe_connect: Grants access to manage Stripe Connect integrations for stores.

Managing Permissions:

  • Role-Based Access: Permissions are typically assigned based on user roles within the organization (e.g., Admin, Operations Manager, Store Manager).

  • Verification: The Sidebar checks user permissions before rendering action buttons or enabling functionalities to prevent unauthorized access.

Usage Tips:

  • Ensure Proper Access: Verify that your user account has the necessary permissions to perform desired actions on the Sidebar.

  • Requesting Access: If you lack certain permissions but require them for your role, contact your system administrator or support team to request access.

  • Regular Audits: Periodically review and update user permissions to align with organizational changes and role evolutions.

Customization

The Sidebar is designed to be flexible and customizable, allowing it to adapt to various organizational needs and user preferences.

Customizing Sidebar Items:

  1. Adding New Items:

    • Code Integration: Developers can add new Sidebar items by updating the allSidebarItems array with the necessary properties.

    • Properties Include: key, title, href, icon, group, deemphasized, rightAdornment.

  2. Grouping Items:

    • Group Property: Assign Sidebar items to specific groups to maintain organized navigation.

    • Dynamic Groups: The Sidebar dynamically groups items based on their group property, ensuring a structured layout.

  3. Deemphasizing Items:

    • Purpose: Highlight or downplay certain items to reflect their importance or frequency of use.

    • Implementation: Use the deemphasized property to style items accordingly.

  4. Badges and Adornments:

    • Right Adornments: Display additional information like counts or statuses next to Sidebar items.

    • Custom Elements: Integrate custom React components or icons as adornments for enhanced functionality.

Usage Tips:

  • Consistent Styling: Ensure that new items follow the existing design patterns for a cohesive appearance.

  • User Feedback: Gather user feedback to determine which items should be added, grouped, or deemphasized to better serve organizational needs.

Error Handling and Notifications

The Sidebar incorporates robust error handling and user-friendly notifications to keep you informed about the system's status and any issues that may arise.

Key Features:

  • Snackbar Notifications:

    • Success Messages: Confirm successful actions like adding or deleting stores.

    • Error Messages: Inform users of any failures during operations, such as insufficient permissions or network issues.

  • Loading Indicators:

    • CircularProgress: Indicates ongoing operations like data fetching or processing actions within commands.

  • Validation Feedback:

    • Ensure that inputs (like URLs or form fields) are correctly formatted before executing related commands.

Usage Tips:

  • Immediate Feedback: Pay attention to snackbar notifications for instant updates on your actions and system status.

  • Handle Errors Promptly: Address any error messages or alerts immediately to ensure smooth operations and accurate navigation.

  • Maintain Connectivity: Ensure a stable internet connection to facilitate seamless data fetching and Sidebar interactions.

Frequently Asked Questions (FAQs)

1. How do I add a new store using the Sidebar?

  • Answer:

    1. Click on the "Add Store" button located at the top of the Sidebar.

    2. A modal will appear prompting you to enter the store details.

    3. Fill in the required information such as store name, address, and phone number.

    4. Click the "Add Store" button within the modal to create the new store.

    5. A success notification will confirm the addition, and the new store will appear in the Sidebar.

2. Why is the "Add Store" button disabled?

  • Answer:

    • The "Add Store" button may be disabled if:

      • You have reached the maximum number of allowed stores (maxLocations).

      • Your user account lacks the stores_add permission.

    • Solutions:

      1. Check Store Limit: Verify if you have reached the maximum number of stores. Contact sales if you need to increase this limit.

      2. Verify Permissions: Ensure that your account has the necessary permissions to add stores. Contact your administrator if needed.

3. How do I mark a Sidebar item as a favorite?

  • Answer:

    1. Locate the Sidebar item you wish to favorite.

    2. Click the heart icon next to the item's name.

    3. A filled heart icon indicates that the item has been added to your favorites.

    4. The item will now appear under the "Favorites" group at the top of the Sidebar for easy access.

4. Can I customize the groups within the Sidebar?

  • Answer:

    • Developer-Level Customization: Currently, only developers can customize the groups by modifying the allSidebarItems array in the Sidebar's source code.

    • User-Level Customization: End-users do not have the ability to create or modify groups. However, you can manage your favorite items to prioritize frequently used sections.

5. What happens when I click the "Get Rickrolled" command in the Command Bar?

  • Answer:

    • Clicking the "Get Rickrolled" command will redirect you to Rick Astley's classic music video on YouTube, serving as a fun Easter egg within the application.

6. How do I access the Command Bar from the Sidebar?

  • Answer:

    • The Command Bar is integrated into the Sidebar and can be accessed by clicking on the "Quick actions" button within the Sidebar. Additionally, you can open it using the keyboard shortcut ⌘K (Mac) or Ctrl+K (Windows/Linux).

7. Why are some Sidebar items deemphasized?

  • Answer:

    • Deemphasized Items: These items are styled differently to indicate that they are less frequently used or hold a different priority level within the application.

    • Purpose: Helps in decluttering the Sidebar and focusing attention on more critical functionalities.

Troubleshooting

Issue 1: Sidebar Items Not Displaying Correctly

  • Possible Cause: Data fetching errors, rendering issues, or CSS conflicts affecting the display of Sidebar items.

  • Solution:

    1. Check Internet Connection: Ensure your device is connected to the internet.

    2. Refresh the Page: Reload the application to attempt fetching the latest data.

    3. Inspect Console for Errors: Open your browser’s developer console to check for JavaScript or data fetching errors.

    4. Check CSS Styles: Ensure that there are no CSS conflicts affecting the display of Sidebar items.

    5. Disable Browser Extensions: Some extensions might interfere with page rendering. Disable them and try again.

    6. Clear Browser Cache: Clear your browser’s cache and attempt to view the Sidebar items again.

    7. Contact Support: If the issue persists, reach out to RentalTide support with specific error details and screenshots for assistance.

Issue 2: Cannot Add New Store via Sidebar

  • Possible Cause: Insufficient permissions, store limit reached, or JavaScript errors preventing the Add Store modal from opening.

  • Solution:

    1. Verify Permissions: Ensure your user account has the stores_add permission.

    2. Check Store Limit: Confirm that you have not reached the maximum number of allowed stores.

    3. Inspect Console for Errors: Open your browser’s developer console to identify any JavaScript errors.

    4. Refresh the Page: Reload the application to reset UI components.

    5. Disable Browser Extensions: Some extensions might interfere with modal functionalities. Disable them and try again.

    6. Clear Browser Cache: Clear your browser’s cache and attempt to add a store again.

    7. Contact Support: If the issue persists, notify RentalTide support with specific error details for further assistance.

Issue 3: Favorite Toggle Not Working

  • Possible Cause: JavaScript errors, state management issues, or permission restrictions preventing the toggle functionality.

  • Solution:

    1. Inspect Console for Errors: Open your browser’s developer console to identify any JavaScript errors.

    2. Refresh the Page: Reload the application to reset UI components and state.

    3. Disable Browser Extensions: Some extensions might interfere with interactive elements. Disable them and try again.

    4. Verify Permissions: Ensure that your account has the necessary permissions to modify favorites.

    5. Clear Browser Cache: Clear your browser’s cache and attempt to toggle the favorite again.

    6. Contact Support: If the toggle still does not work, contact RentalTide support with detailed information for assistance.

Issue 4: Sidebar Not Opening on Mobile Devices

  • Possible Cause: Swipe gesture not recognized, JavaScript errors, or CSS conflicts preventing the SwipeableDrawer from functioning correctly.

  • Solution:

    1. Use Toggle Button: Ensure you are using the designated toggle button to open the Sidebar.

    2. Check Swipe Gestures: Verify that your device's touch gestures are functioning correctly.

    3. Inspect Console for Errors: Open your browser’s developer console to identify any JavaScript errors affecting the SwipeableDrawer.

    4. Refresh the Page: Reload the application to reset UI components.

    5. Disable Browser Extensions: Some extensions might interfere with swipe functionalities. Disable them and try again.

    6. Clear Browser Cache: Clear your browser’s cache and attempt to open the Sidebar again.

    7. Contact Support: If the Sidebar still does not open, reach out to RentalTide support with specific error details and device information for assistance.

Issue 5: Incorrect Grouping of Sidebar Items

  • Possible Cause: Misconfiguration in the allSidebarItems array, such as incorrect group properties or duplicate keys.

  • Solution:

    1. Review Sidebar Configuration: Ensure that each Sidebar item has the correct group property assigned.

    2. Check for Duplicate Keys: Verify that each Sidebar item has a unique key to prevent rendering issues.

    3. Refresh the Page: Reload the application to apply any configuration changes.

    4. Inspect Console for Errors: Look for any errors related to Sidebar item rendering.

    5. Contact Support: If grouping issues persist, contact RentalTide support with specific details about the misgrouped items for further assistance.

Related Articles
Users Page User Guide
Profile Page User Guide
Business Page (Brand) User Guide
Stores Page User Guide
Command Bar (Quick Actions) User Guide
Did this answer your question?