+
{breadcrumbsArray.map((crumb, index) => (
- {renderCrumb(crumb)}
- {index !== breadcrumbsArray.length - 1 ? ' > ' : ''}
+ {renderCrumb(crumb)}
+ {index !== breadcrumbsArray.length - 1 && >}
))}
@@ -44,7 +42,7 @@ function renderCrumb(crumb: Crumb | string) {
{crumb.label}
diff --git a/app/react/components/PageHeader/HeaderContainer.css b/app/react/components/PageHeader/HeaderContainer.module.css
similarity index 65%
rename from app/react/components/PageHeader/HeaderContainer.css
rename to app/react/components/PageHeader/HeaderContainer.module.css
index d5a58e20d..6a23e673b 100644
--- a/app/react/components/PageHeader/HeaderContainer.css
+++ b/app/react/components/PageHeader/HeaderContainer.module.css
@@ -1,33 +1,29 @@
-.row.header .meta .page {
- padding-top: 7px;
+.header {
+ min-height: 60px;
+ margin-bottom: 15px;
+
+ background-color: var(--bg-body-color);
+ margin-bottom: 5px !important;
}
-.row.header {
- min-height: 60px;
- background: var(--bg-row-header-color);
- margin-bottom: 15px;
-}
-.row.header > div:last-child {
+.header > div:last-child {
padding-right: 0;
}
-.row.header .meta .page {
- font-size: 17px;
- padding-top: 11px;
-}
-.row.header .meta div {
+.header .meta div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-.row.header .login a {
+
+.header .login a {
padding: 18px;
display: block;
}
-.row.header .user {
+.header .user {
min-width: 130px;
}
-.row.header .user > .item {
+.header .user > .item {
width: 65px;
height: 60px;
float: right;
@@ -35,36 +31,36 @@
text-align: center;
vertical-align: middle;
}
-.row.header .user > .item a {
+.header .user > .item a {
color: #919191;
display: block;
}
-.row.header .user > .item i {
+.header .user > .item i {
font-size: 20px;
line-height: 55px;
}
-.row.header .user > .item img {
+.header .user > .item img {
width: 40px;
height: 40px;
margin-top: 10px;
border-radius: 2px;
}
-.row.header .user > .item ul.dropdown-menu {
+.header .user > .item ul.dropdown-menu {
border-radius: 2px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
}
-.row.header .user > .item ul.dropdown-menu .dropdown-header {
+.header .user > .item ul.dropdown-menu .dropdown-header {
text-align: center;
}
-.row.header .user > .item ul.dropdown-menu li.link {
+.header .user > .item ul.dropdown-menu li.link {
text-align: left;
}
-.row.header .user > .item ul.dropdown-menu li.link a {
+.header .user > .item ul.dropdown-menu li.link a {
padding-left: 7px;
padding-right: 7px;
}
-.row.header .user > .item ul.dropdown-menu:before {
+.header .user > .item ul.dropdown-menu:before {
position: absolute;
top: -7px;
right: 23px;
@@ -74,7 +70,7 @@
border-left: 7px solid transparent;
content: '';
}
-.row.header .user > .item ul.dropdown-menu:after {
+.header .user > .item ul.dropdown-menu:after {
position: absolute;
top: -6px;
right: 24px;
diff --git a/app/react/components/PageHeader/HeaderContainer.stories.tsx b/app/react/components/PageHeader/HeaderContainer.stories.tsx
index 8b3bc7faf..e870c6188 100644
--- a/app/react/components/PageHeader/HeaderContainer.stories.tsx
+++ b/app/react/components/PageHeader/HeaderContainer.stories.tsx
@@ -7,7 +7,6 @@ import { UserViewModel } from '@/portainer/models/user';
import { HeaderContainer } from './HeaderContainer';
import { Breadcrumbs } from './Breadcrumbs';
import { HeaderTitle } from './HeaderTitle';
-import { HeaderContent } from './HeaderContent';
export default {
component: HeaderContainer,
@@ -28,14 +27,13 @@ function Template({ title }: StoryProps) {
-
-
-
+
+
);
diff --git a/app/react/components/PageHeader/HeaderContainer.tsx b/app/react/components/PageHeader/HeaderContainer.tsx
index 12bb1595f..acc840dad 100644
--- a/app/react/components/PageHeader/HeaderContainer.tsx
+++ b/app/react/components/PageHeader/HeaderContainer.tsx
@@ -1,6 +1,7 @@
import { PropsWithChildren, createContext, useContext } from 'react';
+import clsx from 'clsx';
-import './HeaderContainer.css';
+import styles from './HeaderContainer.module.css';
const Context = createContext
(null);
@@ -15,10 +16,10 @@ export function useHeaderContext() {
export function HeaderContainer({ children }: PropsWithChildren) {
return (
-
+
-
{children}
+
{children}
diff --git a/app/react/components/PageHeader/HeaderContent.test.tsx b/app/react/components/PageHeader/HeaderContent.test.tsx
deleted file mode 100644
index e43ac28e0..000000000
--- a/app/react/components/PageHeader/HeaderContent.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { renderWithQueryClient } from '@/react-tools/test-utils';
-
-import { HeaderContainer } from './HeaderContainer';
-import { HeaderContent } from './HeaderContent';
-
-test('should not render without a wrapping HeaderContainer', async () => {
- const consoleErrorFn = jest
- .spyOn(console, 'error')
- .mockImplementation(() => jest.fn());
-
- function renderComponent() {
- return renderWithQueryClient(
);
- }
-
- expect(renderComponent).toThrowErrorMatchingSnapshot();
-
- consoleErrorFn.mockRestore();
-});
-
-test('should display a HeaderContent', async () => {
- const content = 'content';
-
- const { queryByText } = renderWithQueryClient(
-
- {content}
-
- );
-
- const contentElement = queryByText(content);
- expect(contentElement).toBeVisible();
-});
diff --git a/app/react/components/PageHeader/HeaderContent.tsx b/app/react/components/PageHeader/HeaderContent.tsx
deleted file mode 100644
index 7a327a34c..000000000
--- a/app/react/components/PageHeader/HeaderContent.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { useHeaderContext } from './HeaderContainer';
-
-export function HeaderContent({ children }: PropsWithChildren
) {
- useHeaderContext();
-
- return (
-
- );
-}
diff --git a/app/react/components/PageHeader/HeaderTitle.tsx b/app/react/components/PageHeader/HeaderTitle.tsx
index 90dd8e575..006b5db1a 100644
--- a/app/react/components/PageHeader/HeaderTitle.tsx
+++ b/app/react/components/PageHeader/HeaderTitle.tsx
@@ -24,13 +24,17 @@ export function HeaderTitle({ title, children }: PropsWithChildren) {
const { user } = useUser();
return (
-
- {title}
-
{children}
+
+
+
+ {title}
+
+ {children &&
{children}}
+