From 01d7d9ae1378a4d03cb9789765ebf42f6fce32fb Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Thu, 24 Jul 2025 08:51:19 +0200 Subject: [PATCH] chore: moving things around a little bit Signed-off-by: benjdlambert --- .../next-app/packages/app/src/App.tsx | 8 +--- .../next-app/packages/app/src/modules/app.tsx | 16 -------- .../packages/app/src/modules/nav/LogoFull.tsx | 28 +++++++++++++ .../packages/app/src/modules/nav/LogoIcon.tsx | 28 +++++++++++++ .../packages/app/src/modules/nav/Sidebar.tsx | 41 +++++++++++++++++++ .../app/src/modules/nav/SidebarLogo.tsx | 36 ++++++++++++++++ .../packages/app/src/modules/nav/index.ts | 7 ++++ 7 files changed, 142 insertions(+), 22 deletions(-) delete mode 100644 packages/create-app/templates/next-app/packages/app/src/modules/app.tsx create mode 100644 packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoFull.tsx create mode 100644 packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoIcon.tsx create mode 100644 packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx create mode 100644 packages/create-app/templates/next-app/packages/app/src/modules/nav/SidebarLogo.tsx create mode 100644 packages/create-app/templates/next-app/packages/app/src/modules/nav/index.ts diff --git a/packages/create-app/templates/next-app/packages/app/src/App.tsx b/packages/create-app/templates/next-app/packages/app/src/App.tsx index 457d0cf9da..c0206fec07 100644 --- a/packages/create-app/templates/next-app/packages/app/src/App.tsx +++ b/packages/create-app/templates/next-app/packages/app/src/App.tsx @@ -1,11 +1,7 @@ import { createApp } from '@backstage/frontend-defaults'; import catalogPlugin from '@backstage/plugin-catalog/alpha'; -import { appModule } from './modules/app'; +import { navModule } from './modules/nav'; export default createApp({ - features: [ - catalogPlugin, - appModule, - ], + features: [catalogPlugin, navModule], }); - diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/app.tsx b/packages/create-app/templates/next-app/packages/app/src/modules/app.tsx deleted file mode 100644 index 2331df6250..0000000000 --- a/packages/create-app/templates/next-app/packages/app/src/modules/app.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { coreExtensionData, createFrontendModule } from '@backstage/frontend-plugin-api'; -import appPlugin from '@backstage/plugin-app'; - -export const appModule = createFrontendModule({ - pluginId: 'app', - extensions: [ - appPlugin.getExtension('app/nav').override({ - factory: () => [ - coreExtensionData.reactElement( - // todo: sidebar -
- ) - ] - }) - ] -}) \ No newline at end of file diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoFull.tsx b/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoFull.tsx new file mode 100644 index 0000000000..95f69ae530 --- /dev/null +++ b/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoFull.tsx @@ -0,0 +1,28 @@ +import { makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles({ + svg: { + width: 'auto', + height: 30, + }, + path: { + fill: '#7df3e1', + }, +}); + +export const LogoFull = () => { + const classes = useStyles(); + + return ( + + + + ); +}; diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoIcon.tsx b/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoIcon.tsx new file mode 100644 index 0000000000..38544dd156 --- /dev/null +++ b/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoIcon.tsx @@ -0,0 +1,28 @@ +import { makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles({ + svg: { + width: 'auto', + height: 28, + }, + path: { + fill: '#7df3e1', + }, +}); + +export const LogoIcon = () => { + const classes = useStyles(); + + return ( + + + + ); +}; diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx b/packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx new file mode 100644 index 0000000000..f90991f5d6 --- /dev/null +++ b/packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx @@ -0,0 +1,41 @@ +import { + SidebarDivider, + SidebarGroup, + SidebarItem, + SidebarScrollWrapper, +} from '@backstage/core-components'; +import { compatWrapper } from '@backstage/core-compat-api'; +import { Sidebar } from '@backstage/core-components'; +import { NavContentBlueprint } from '@backstage/frontend-plugin-api'; +import { SidebarLogo } from './SidebarLogo'; +import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; +import HomeIcon from '@material-ui/icons/Home'; +import MenuIcon from '@material-ui/icons/Menu'; + +export const SidebarContent = NavContentBlueprint.make({ + params: { + component: ({ items }) => + compatWrapper( + + + }> + {/* Global nav, not org-specific */} + + + {/* End global nav */} + + + {/* Items in this group will be scrollable if they run out of space */} + {items.map((item, index) => ( + + ))} + + + , + ), + }, +}); diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/nav/SidebarLogo.tsx b/packages/create-app/templates/next-app/packages/app/src/modules/nav/SidebarLogo.tsx new file mode 100644 index 0000000000..80df964d74 --- /dev/null +++ b/packages/create-app/templates/next-app/packages/app/src/modules/nav/SidebarLogo.tsx @@ -0,0 +1,36 @@ +import { + Link, + sidebarConfig, + useSidebarOpenState, +} from '@backstage/core-components'; +import { makeStyles } from '@material-ui/core'; +import { LogoFull } from './LogoFull'; +import { LogoIcon } from './LogoIcon'; + +const useSidebarLogoStyles = makeStyles({ + root: { + width: sidebarConfig.drawerWidthClosed, + height: 3 * sidebarConfig.logoHeight, + display: 'flex', + flexFlow: 'row nowrap', + alignItems: 'center', + marginBottom: -14, + }, + link: { + width: sidebarConfig.drawerWidthClosed, + marginLeft: 24, + }, +}); + +export const SidebarLogo = () => { + const classes = useSidebarLogoStyles(); + const { isOpen } = useSidebarOpenState(); + + return ( +
+ + {isOpen ? : } + +
+ ); +}; diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/nav/index.ts b/packages/create-app/templates/next-app/packages/app/src/modules/nav/index.ts new file mode 100644 index 0000000000..abb61fc8af --- /dev/null +++ b/packages/create-app/templates/next-app/packages/app/src/modules/nav/index.ts @@ -0,0 +1,7 @@ +import { createFrontendModule } from '@backstage/frontend-plugin-api'; +import { SidebarContent } from './Sidebar'; + +export const navModule = createFrontendModule({ + pluginId: 'app', + extensions: [SidebarContent], +});