amad-person · October 9, 2025 15:24
diff --git a/sidebar.html b/sidebar.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Frontend Interview - Sidebar Menu</title>
    
    <!-- React CDN -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    
    <!-- Babel for JSX transformation -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
        }
        
        .container {
            display: flex;
        }
        
        .instructions {
            flex: 1;
            padding: 20px;
            background: #f5f5f5;
        }
        
        .instructions h1 {
            color: #333;
            margin-bottom: 20px;
        }
        
        .instructions h2 {
            color: #555;
            margin-top: 25px;
            margin-bottom: 10px;
        }
        
        .instructions ul {
            line-height: 1.6;
        }
        
        .instructions code {
            background: #e8e8e8;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }
        
        .data-structure {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
        }
    </style>
 </head>
 <body>
    <div class="container">
        <div class="instructions">
            <h1>Frontend Interview Challenge: React Sidebar Menu</h1>
            
            <h2>Task</h2>
            <p>Build a React sidebar menu component using the provided data structure. The component should:</p>
            
            <ul>
                <li>Display top-level items vertically in a sidebar</li>
                <li>Show sub-items when a parent item is clicked</li>
                <li>Log the clicked item's title to the console</li>
                <li>Use minimal CSS for styling</li>
            </ul>
            
            <h2>Data Structure</h2>
            <div class="data-structure">const items = [
    {
        title: "Blog",
        group: null,
    },
    {
        title: "About",
        group: null,
    },
    {
        title: "Career",
        group: "About",
    },
    {
        title: "Contact",
        group: "About",
    },
 ];</div>

            <h2>Requirements</h2>
            <ul>
                <li>Items with <code>group: null</code> are top-level menu items</li>
                <li>Items with a group value are sub-items of that parent</li>
                <li>Clicking any item should <code>console.log(item.title)</code></li>
                <li>Clicking a parent item should toggle its sub-items visibility</li>
                <li>Style as a sidebar (vertical, fixed width)</li>
            </ul>
            
            <h2>Getting Started</h2>
            <p>Complete the <code>Sidebar</code> component in the script section below. React and ReactDOM are already loaded via CDN.</p>
            
            <h2>Expected Behavior</h2>
            <ul>
                <li>Click "Blog" → logs "Blog"</li>
                <li>Click "About" → logs "About" and shows/hides Career & Contact</li>
                <li>Click "Career" or "Contact" → logs their title</li>
            </ul>
        </div>
        
        <!-- This is where the React component will render -->
        <div id="root"></div>
    </div>

    <script type="text/babel">
        const { useState } = React;

        const Sidebar = () => {
            // TODO: Complete this component
            const items = [
                {
                    title: "Blog",
                    group: null,
                },
                {
                    title: "About",
                    group: null,
                },
                {
                    title: "Career",
                    group: "About",
                },
                {
                    title: "Contact",
                    group: "About",
                },
            ];

            // Your code here
            return (
                <div style={{
                    width: '200px',
                    height: '100vh',
                    background: '#333'
                }}>
                    {/* Build your menu here */}
                    <div style={{ color: 'white', padding: '20px' }}>
                        Menu goes here...
                    </div>
                </div>
            );
        };

        ReactDOM.render(<Sidebar />, document.getElementById('root'));
    </script>
 </body>
 </html>
No results found