diff --git a/src/client/AppNext.tsx b/src/client/AppNext.tsx
index 1f6981a3..0f1aa43c 100644
--- a/src/client/AppNext.tsx
+++ b/src/client/AppNext.tsx
@@ -13,10 +13,8 @@ import { Provider } from './components/Provider';
import { Container, Box, Center, Splitter, useSplitter } from '@chakra-ui/react';
import { MsSseEvent } from '../core/Api';
import { SSEProvider } from "@flamefrontend/sse-runtime-react";
-import { AppHeader, RightHeaderFloatingLogs, RightHeaderSwitchLogs } from './components/AppHeader';
+import { AppHeader } from './components/AppHeader';
import { NAV_LINKS, SideNavItems } from './components/SideNav';
-import { LogsFetchable } from './components/LogsNext';
-import { SplitLayout } from './components/layouts/SplitLayout';
import { ComponentDetailedRoutable } from './components/msComponent/MSComponentDetailed';
import { MSErrorBoundary } from './components/ErrorBoundary';
@@ -60,9 +58,11 @@ const Layout = () => {
//const [logsEnabled, setLogsEnabled] = useState(true);
const location = useLocation();
return (<>
-
+
+
+
-
+
>);
diff --git a/src/client/components/AppHeader.tsx b/src/client/components/AppHeader.tsx
index fb58d36e..5d96c412 100644
--- a/src/client/components/AppHeader.tsx
+++ b/src/client/components/AppHeader.tsx
@@ -17,6 +17,7 @@ import { ToggleTip } from "./ToggleTip";
import { ErrorLike } from "../../core/Atomic";
import { ErrorAlert } from "./ErrorAlert";
import { MSErrorBoundary } from "./ErrorBoundary";
+import { ExternaLinksMenu } from "./ExternaLinksMenu";
export const AppTitle = (props: { fetchable?: boolean } = {}) => {
const {
@@ -121,8 +122,7 @@ export const SSEStatus = (props: {live?: boolean, status?: ReturnType {
const [width, height] = useWindowSize();
- return
-
+ return (
{
-
+ );
}
export const AppHeader = (props: PropsWithChildren<{ fetchable?: boolean }>) => {
return (
- {props.children}
+
+
+
+
+
)
}
\ No newline at end of file
diff --git a/src/client/components/ExternaLinksMenu.tsx b/src/client/components/ExternaLinksMenu.tsx
new file mode 100644
index 00000000..5f3f8935
--- /dev/null
+++ b/src/client/components/ExternaLinksMenu.tsx
@@ -0,0 +1,30 @@
+import { Button, Menu, Portal, Box, ChakraComponent } from "@chakra-ui/react"
+import { ExternalLinkIcon } from "./icons/ChakraIcons"
+import { EXTERNAL_LINKS } from "./SideNav"
+import { ComponentProps } from "react"
+
+
+export const ExternaLinksMenu = (props: ComponentProps = {}) => (
+
+
+
+
+
+
+
+
+ {EXTERNAL_LINKS.items.map((link) => (
+
+
+ {link.title}
+
+
+ ))}
+
+
+
+
+
+ )
\ No newline at end of file
diff --git a/src/client/components/MobileMenu.tsx b/src/client/components/MobileMenu.tsx
index 8352d735..bfd1a5c5 100644
--- a/src/client/components/MobileMenu.tsx
+++ b/src/client/components/MobileMenu.tsx
@@ -12,9 +12,6 @@ import { NAV_LINKS, SideNavItems } from "./SideNav";
const MobileMenuButton = MenuButton;
export const MobileSidebarNav = (props: { hideFrom?: BreakpointName | false } = {}) => {
- const {
- hideFrom = 'md'
- } = props;
const [isOpen, setIsOpen] = useState(false);
let location = useLocation();
@@ -22,11 +19,11 @@ export const MobileSidebarNav = (props: { hideFrom?: BreakpointName | false } =
const closeMenu = () => setIsOpen(false)
const menuButtonProps: ComponentProps = {
- variant: 'ghost'
+ variant: 'ghost',
+ iconProps: {
+ size: 'lg'
+ }
};
- if (hideFrom !== false) {
- menuButtonProps.hideFrom = hideFrom;
- }
useEffect(() => {
setIsOpen(false);
diff --git a/src/client/components/SideNav.tsx b/src/client/components/SideNav.tsx
index aa8b475b..66a1ce7a 100644
--- a/src/client/components/SideNav.tsx
+++ b/src/client/components/SideNav.tsx
@@ -104,18 +104,7 @@ const StatusBadge = (props: BadgeProps) => (
/>
)
-export const NAV_LINKS: SideNavProps[] = [
- {
- title: 'Main',
- id: 'Main',
- items: [
- {
- title: 'Dashboard',
- url: '/next/'
- }
- ]
- },
- {
+export const EXTERNAL_LINKS: SideNavProps = {
title: 'Links',
id: 'Links',
items: [
@@ -135,5 +124,18 @@ export const NAV_LINKS: SideNavProps[] = [
external: true
}
]
- }
-]
\ No newline at end of file
+}
+
+export const NAV_LINKS: SideNavProps[] = [
+ {
+ title: 'Main',
+ id: 'Main',
+ items: [
+ {
+ title: 'Dashboard',
+ url: '/next/'
+ }
+ ]
+ },
+ EXTERNAL_LINKS
+];
\ No newline at end of file
diff --git a/src/client/components/icons/ChakraIcons.tsx b/src/client/components/icons/ChakraIcons.tsx
index 16f5192c..e6e70d52 100644
--- a/src/client/components/icons/ChakraIcons.tsx
+++ b/src/client/components/icons/ChakraIcons.tsx
@@ -48,6 +48,20 @@ export const makeIconButton = (Icon: IconType) => (props: PropsWithChildren
);
}
+export const makeChakraIconButton = (IconBase: IconType) => (props: PropsWithChildren> & { iconProps?: ComponentProps, loading?: boolean }) => {
+ const {
+ iconProps = {},
+ children,
+ loading = false,
+ size = 'xs',
+ ...rest
+ } = props;
+ return (
+
+ {loading ? : }{children}
+
+ );
+}
export const makeChakraIcon = (IconComponent: IconType) => (props: ComponentProps & { iconProps?: IconBaseProps }) => {
const {
iconProps,
@@ -95,7 +109,7 @@ export const TerminalButton = (props: ComponentProps) => (
);
export const MenuIcon = LuAlignJustify;
-export const MenuButton = makeIconButton(MenuIcon);
+export const MenuButton = makeChakraIconButton(MenuIcon);
export const XIcon = LuX;
export const XButton = makeIconButton(XIcon);