From f431f4d5aff26b7b224aa0747b6fd59fc398f194 Mon Sep 17 00:00:00 2001 From: FoxxMD Date: Wed, 8 Jul 2026 16:49:37 +0000 Subject: [PATCH] refactor(ui): Remove non-mobile sidebar and ad header links * Remove non-mobile sidebar to free up some more screen real estate * Add quick Links menu to header that hides on mobile breakpoint --- src/client/AppNext.tsx | 10 +++---- src/client/components/AppHeader.tsx | 12 ++++++--- src/client/components/ExternaLinksMenu.tsx | 30 +++++++++++++++++++++ src/client/components/MobileMenu.tsx | 11 +++----- src/client/components/SideNav.tsx | 30 +++++++++++---------- src/client/components/icons/ChakraIcons.tsx | 16 ++++++++++- 6 files changed, 78 insertions(+), 31 deletions(-) create mode 100644 src/client/components/ExternaLinksMenu.tsx 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);