Use Grafana sidebar from plugins

module.tsx

import React, { Suspense, lazy, memo } from 'react';
import { AppPlugin, type AppRootProps } from '@grafana/data';
import { LoadingPlaceholder } from '@grafana/ui';
import type { AppConfigProps } from './components/AppConfig/AppConfig';

const LazyApp = lazy(() => import('./components/App/App'));
const LazyAppConfig = lazy(() => import('./components/AppConfig/AppConfig'));

const App = (props: AppRootProps) => (
  <Suspense fallback={<LoadingPlaceholder text="" />}>
    <LazyApp {...props} />
  </Suspense>
);

const AppConfig = (props: AppConfigProps) => (
  <Suspense fallback={<LoadingPlaceholder text="" />}>
    <LazyAppConfig {...props} />
  </Suspense>
);

const sidebar = 'sidebartest';
function SidebarComponent() {
  console.log('rendered');
  return <div>Hello World</div>;
}

export const plugin = new AppPlugin<{}>()
  .setRootPage(App)
  .addConfigPage({
    title: 'Configuration',
    icon: 'cog',
    body: AppConfig,
    id: 'configuration',
  })
  .addComponent({
    targets: 'grafana/extension-sidebar/v0-alpha',
    title: sidebar,
    description: sidebar,
    component: memo(SidebarComponent),
  })
  .addLink({
    targets: 'grafana/extension-sidebar/v0-alpha',
    title: sidebar,
    description: sidebar,
    onClick: () => {
      console.log('clicked');
    },
  });