diff --git a/front/src/AppNavbar.tsx b/front/src/AppNavbar.tsx index e6d31ce6a..2f953c4b4 100644 --- a/front/src/AppNavbar.tsx +++ b/front/src/AppNavbar.tsx @@ -39,6 +39,7 @@ export const AppNavbar = () => { onClick={() => { openCommandMenu(); }} + keyboard={['⌘', 'K']} /> ` color: ${(props) => props.danger ? props.theme.color.red : props.theme.font.color.primary}; } + :hover .keyboard-shortcuts { + visibility: visible; + } user-select: none; @media (max-width: ${MOBILE_VIEWPORT}px) { @@ -98,6 +102,17 @@ const StyledItemCount = styled.div` width: 16px; `; +const StyledKeyBoardShortcut = styled.div` + align-items: center; + border-radius: 4px; + color: ${({ theme }) => theme.font.color.light}; + display: flex; + justify-content: center; + letter-spacing: 1px; + margin-left: auto; + visibility: hidden; +`; + const NavItem = ({ label, Icon, @@ -107,6 +122,7 @@ const NavItem = ({ danger, soon, count, + keyboard, }: NavItemProps) => { const theme = useTheme(); const navigate = useNavigate(); @@ -138,6 +154,11 @@ const NavItem = ({ {label} {soon && Soon} {!!count && {count}} + {keyboard && ( + + {keyboard.map((key) => key)} + + )} ); };