Sidebar Component Documentation

Purpose

The Sidebar component in the Vantage analytics and data platform serves as a navigational tool, allowing users to easily access different functionalities and sections of the application. This component is designed to be sticky, ensuring that navigation options remain visible as users scroll through content. The Sidebar can dynamically display links and buttons based on the user's data and organizational roles.

How It Works

The Sidebar operates by utilizing user-specific data retrieved through the useUser hook. It checks for the presence of userData, and if it exists, it extracts relevant information such as the default dashboard and sidebar settings. The layout is constructed using a combination of buttons and links, with each button linked to a specific route or functional operation (e.g., sign out), allowing users to navigate seamlessly.

The component's background color can be customized via user settings, enhancing the user experience by aligning with personal or organizational branding.

Data Expectations

The Sidebar expects the following data from the userData object:

• default_dashboard: The ID of the user's default dashboard to navigate to.
• sidebar: An array of sidebar items, each containing a dashboardId and an icon.
• settings: An object containing user-specific settings, including sidebarColor, which defines the background color of the sidebar.

Settings

The Sidebar component has several settings that dictate its appearance and functionality. Below, each setting is explained in detail:

1. Setting Name: sidebarColor

   • Input Type: String (hex color code)
   • Description: This setting determines the background color of the Sidebar component. Changing this setting allows users to customize the visual aesthetics to fit their preferences or to meet branding standards.
   • Default Value: #184b6f (Intuidy Dark)

2. Setting Name: sidebar

   • Input Type: Array of Objects
   • Description: This setting allows the user to define custom dashboard links within the Sidebar. Each object in the array should include a dashboardId and an icon. Adding or removing items from this array will dictate which dashboards appear in the Sidebar, enhancing navigational flexibility.
   • Default Value: An empty array [] if not set, meaning no custom sidebar items are displayed.

3. Setting Name: default_dashboard

   • Input Type: String
   • Description: This setting specifies the ID of the user's default dashboard. If this value is set, the corresponding dashboard will be linked in the Sidebar for easy access. Changing this affects which dashboard is prioritized for quick navigation.
   • Default Value: null if not set, indicating that no default dashboard is associated.

Use Cases & Examples

Use Cases

1. Custom Workplace Navigation: A company can use the Sidebar to provide their employees with quick access to specific dashboards and administrative functions that are unique to their roles. For instance, dedicated dashboards for departments such as Marketing, Sales, or Customer Support can be easily added to the Sidebar.

2. Dynamic User Experience: Organizations that have multiple product offerings can utilize the Sidebar to segment their navigation based on the user’s product interest. Depending on the user's preferences, different dashboard links and resources can be displayed.

3. User Role Management: The Sidebar can adapt its content based on user roles. For instance, an administrator may see additional options like “Admin Controls,” while regular users might not have these options available.

Example Configuration

To illustrate how the Sidebar can be configured for a specific use case, consider a marketing department that needs several dashboards for tracking campaigns:

const userData = {
    default_dashboard: 'marketing_insights',
    sidebar: [
        { dashboardId: 'campaign_performance', icon: 'BarChart' },
        { dashboardId: 'lead_generation', icon: 'UserPlus' },
        { dashboardId: 'social_media', icon: 'Share2' }
    ],
    settings: {
        sidebarColor: '#1a202c' // Custom dark color
    },
    organization_id: 1
};

In this configuration:

• The default dashboard is set to ‘marketing_insights’.
• The Sidebar will display three dashboards specific to marketing efforts: Campaign Performance, Lead Generation, and Social Media.
• The background color is set to a custom dark shade of #1a202c, providing a unique look that matches the marketing team's branding.

This example helps illustrate how the Sidebar can be tailored to meet specific user needs while enhancing the overall application experience.