This setup provides a responsive Ant Design dashboard with side navigation. Clicking on menu items updates the content dynamically. Let me know if you need additional features! 🚀

app.jsx

import { Layout, Menu } from 'antd';
import { UserOutlined, SettingOutlined, DashboardOutlined, PictureOutlined } from '@ant-design/icons';
import { useState } from 'react';
import "antd/dist/reset.css";

const { Header, Sider, Content } = Layout;

const Dashboard = () => <h2>Dashboard Page</h2>;
const Users = () => <h2>Profiles Page</h2>;
const Settings = () => <h2>Settings Page</h2>;
const Artworks = () => <h2>Artworks Page</h2>;

const App = () => {
    const [collapsed, setCollapsed] = useState(false);
    const [selectedKey, setSelectedKey] = useState('dashboard');

    const menuItems = [
        { key: 'dashboard', icon: <DashboardOutlined />, label: 'Dashboard' },
        { key: 'profiles', icon: <UserOutlined />, label: 'Profiles' },
        { key: 'settings', icon: <SettingOutlined />, label: 'Settings' },
        { key: 'artworks', icon: <PictureOutlined />, label: 'Artworks' }
    ];

    const renderContent = () => {
        switch (selectedKey) {
            case 'dashboard': return <Dashboard />;
            case 'profiles': return <Users />;
            case 'settings': return <Settings />;
            case 'artworks': return <Artworks />;
            default: return <Dashboard />;
        }
    };

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}>
                <div className="logo" style={{ color: 'white', textAlign: 'center', padding: '16px' }}>
                    LOGO
                </div>
                <Menu
                    theme="dark"
                    mode="inline"
                    selectedKeys={[selectedKey]}
                    onClick={(e) => setSelectedKey(e.key)}
                    items={menuItems}
                />
            </Sider>
            <Layout>
                <Header style={{ background: '#fff', padding: 0, textAlign: 'center', fontSize: '20px', fontWeight: 'bold' }}>
                    Ant Design Dashboard
                </Header>
                <Content style={{ margin: '16px', padding: '16px', background: '#fff', borderRadius: '8px' }}>
                    {renderContent()}
                </Content>
            </Layout>
        </Layout>
    );
};

export default App;