Skip to content

Commit

Permalink
Merge pull request apache#2809 from SLSJL/dashboard
Browse files Browse the repository at this point in the history
[ISSUE apache#2806] [Feature] Dashboard - New style for the navigation menu
  • Loading branch information
qqeasonchen authored Jan 4, 2023
2 parents b7d0033 + f39f729 commit a5292ff
Show file tree
Hide file tree
Showing 13 changed files with 673 additions and 193 deletions.
6 changes: 6 additions & 0 deletions eventmesh-dashboard/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -124,3 +124,9 @@ yarn-error.log*

# vercel
.vercel

# VS code settings
.vscode

# Yarn lock
yarn.lock
192 changes: 0 additions & 192 deletions eventmesh-dashboard/components/Sidebar.tsx

This file was deleted.

98 changes: 98 additions & 0 deletions eventmesh-dashboard/components/navigation/MenuItem.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import React, { FC, ReactNode } from 'react';
import {
Flex, FlexProps, Link, Text,
} from '@chakra-ui/react';

interface MenuItemProps extends FlexProps {
key: string;
selected: boolean;
active: boolean;
href: string;
children: string | number;
setActiveName: (name: string) => void;
}

export const MenuItem = ({
selected,
active,
href,
children,
setActiveName,
}: MenuItemProps) => (
<Link
position="relative"
href={href}
h="8"
mt={1.5}
mb={1.5}
ml={3}
mr={3}
boxSizing="border-box"
style={{ textDecoration: 'none' }}
_focus={{ boxShadow: 'none' }}
onMouseOver={() => setActiveName(children.toString())}
onMouseOut={() => setActiveName('')}
>
<Flex
position="absolute"
zIndex={2}
w="full"
h="full"
p="6"
borderRadius="lg"
align="center"
role="group"
cursor="pointer"
fontSize="md"
transition="color 0.15s, background-color 0.15s"
color={selected || active ? '#2a62ad' : 'current'}
fontWeight={selected ? 'bolder' : 'none'}
bgColor={selected || active ? '#dce5fe' : 'none'}
wordBreak="break-word"
overflowWrap="normal"
>
{children}
</Flex>
{/* <Box
position="absolute"
zIndex={1}
p={selected || active ? '4' : 0}
borderRadius="lg"
role="group"
cursor="pointer"
transition="width 0.3s, opacity 0.4s"
bgGradient="linear(28deg,#2a4cad, #2a6bad, #28c9ff)"
h="100%"
w={selected || active ? '100%' : '0'}
opacity={selected || active ? 1 : 0}
/> */}
</Link>
);

export const MenuGroupItem: FC<{ name: string; children: ReactNode }> = (
props,
) => {
const { name, children } = props;
return (
<Flex
flexDirection="column"
w="full"
justifyContent="center"
alignContent="center"
>
{name && (
<Text
mt={5}
mb="2"
pl="6"
fontSize="xs"
color="#a2b5d8"
fontWeight="bold"
>
{name.toUpperCase()}
</Text>
)}
{children}
</Flex>
);
};
Loading

0 comments on commit a5292ff

Please sign in to comment.