feat: Turn page titles into dropdown for better navigation

src/components/TitleNavigation/index.tsx

@@ -0,0 +1,32 @@
+import { Dropdown, Icon, Menu } from "@grafana/ui"
+import React from "react"
+
+const menu = (
+    <Menu>
+        <Menu.Item
+            label="Clusters"
+            url="/a/k8s-app/clusters"
+            description="View cluster details"
+        />
+        <Menu.Item
+            label="Workloads"
+            url="/a/k8s-app/workloads"
+            description="Explore workloads in your cluster"
+        />
+        <Menu.Item
+            label="Network"
+            url="/a/k8s-app/network"
+            description="Explore network details"
+        />
+    </Menu>
+)
+
+export function TitleNavigation(title: string) {
+    return (
+        <Dropdown overlay={menu} placement="left-start">
+            <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
+                <h1>{title}<Icon style={{marginLeft: '8px'}} name="angle-down"></Icon></h1>
+            </a>
+        </Dropdown>
+    )
+}

src/pages/Clusters/Clusters.tsx

@@ -16,12 +16,14 @@ import { usePluginJsonData } from 'utils/utils.plugin';
 import { NodePage } from './pages/Node/Node';
 import { createTopLevelVariables } from 'common/variableHelpers';
 import { JsonData } from 'components/AppConfig';
+import { TitleNavigation } from 'components/TitleNavigation';
 
 function getScene(props: JsonData) {
     return new SceneApp({
         pages: [
             new SceneAppPage({
                 title: 'Clusters',
+                renderTitle: TitleNavigation,
                 url: prefixRoute(`${ROUTES.Clusters}`),
                 $timeRange: new SceneTimeRange({
                     from: 'now-1h',

src/pages/Network/Network.tsx

@@ -15,6 +15,7 @@ import { getIngressesScene } from './tabs/Ingresses/Ingresses';
 import { getServicesScene } from './tabs/Services/Services';
 import { IngressPage } from './pages/ingresses';
 import { JsonData } from 'components/AppConfig';
+import { TitleNavigation } from 'components/TitleNavigation';
 
 function getScene(props: JsonData) {
 
@@ -25,6 +26,7 @@ function getScene(props: JsonData) {
         pages: [
           new SceneAppPage({
             title: 'Network',
+            renderTitle: TitleNavigation,
             url: prefixRoute(`${ROUTES.Network}`),
             $timeRange: timeRange,
             controls: [

src/pages/Workloads/Workloads.tsx

@@ -25,6 +25,7 @@ import { DaemonSetPage } from './pages/DaemonSetPage';
 import { CronJobPage } from './pages/CronJobPage';
 import { JobPage } from './pages/JobPage';
 import { JsonData } from 'components/AppConfig';
+import { TitleNavigation } from 'components/TitleNavigation';
 
 function getScene(props: JsonData) {
 
@@ -35,6 +36,7 @@ function getScene(props: JsonData) {
         pages: [
           new SceneAppPage({
             title: 'Workloads',
+            renderTitle: TitleNavigation,
             url: prefixRoute(`${ROUTES.Workloads}`),
             $timeRange: timeRange,
             controls: [