React - Sidebar Navigation

[aditya-xq]

Webpage Sidebar Navigation Design Interview Question

Company Atlassian (Source)

Problem Statement:

Design and implement a dynamic sidebar navigation component, similar to the layout found in tools like Confluence. This sidebar should represent a hierarchy of web pages, where some pages might be nested within others.

Requirements:

1. Sidebar Component Design:

   • Display a list of web pages in a hierarchical manner.
   • Nested pages should be visually distinguishable from their parent pages, preferably with an indentation or prefix.
   • Example Layout:

     — MainPage
     | — Page1
     | — Page2
     | — Page3
     |   | — Page4 (Nested within Page3)
     

2. Dynamic Interactions:

   • Users should be able to expand or collapse nested pages.
   • The state of expansion/collapse should be retained across browser refreshes.
   • Provide visual cues (like an arrow) to indicate if a page has nested pages and if it's currently expanded or collapsed.

3. Additional Features (Bonus):

   • Implement hover effects for each page item.
   • Allow users to rearrange the order of the pages through drag and drop.
   • Provide a search bar to filter and find specific pages quickly.

Constraints:

• The solution should be responsive and must work across all major browsers.
• Think about the user experience and make sure nested pages are clearly identifiable.
• Implement this using standard web technologies (HTML, CSS, JavaScript). You may use a framework or library of your choice for additional features, but the core functionality should be implemented without dependencies.

Evaluation Criteria:

Candidates will be evaluated on:

• Functionality and feature completeness.
• Code quality, organization, and readability.
• Responsiveness and cross-browser compatibility.
• User experience and interface design.
• Handling of potential edge cases.

Hints/Tips:

Consider aspects like:

• Efficient DOM updates when expanding/collapsing nested pages.
• Strategies for retaining the sidebar's state across browser refreshes.
• The impact of deeply nested pages on user experience.

Submission:

Please provide:

• Source code for the sidebar component and any additional features you implemented.
• Any necessary instructions for running and testing the solution.
• A brief explanation of your design choices and any potential trade-offs or challenges faced.