refactor: extract navigation elements

apps/client/src/common/components/navigation-menu/navigation-menu-item/NavigationMenuItem.module.scss

@@ -0,0 +1,37 @@
+.link {
+  display: flex;
+  align-items: center;
+
+  padding: 0.75rem 1.5rem;
+  gap: 0.5rem;
+  width: 100%;
+
+  border-left: 4px solid transparent;
+  color: $action-text-color;
+  white-space: nowrap;
+
+  cursor: pointer;
+
+  transition-property: color;
+  transition-duration: $transition-time-action;
+
+  &:hover {
+    color: $ontime-color;
+    background-color: $gray-1350;
+  }
+
+  &:active {
+    background-color: $border-color-ondark;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: $gray-1300;
+    border: 2px solid $ui-white;
+  }
+
+  &.current {
+    background-color: $gray-1300;
+    border-left: 4px solid $action-text-color;
+  }
+}

apps/client/src/common/components/navigation-menu/navigation-menu-item/NavigationMenuItem.tsx

@@ -0,0 +1,33 @@
+import { PropsWithChildren } from 'react';
+
+import { isKeyEnter } from '../../../utils/keyEvent';
+import { cx } from '../../../utils/styleUtils';
+
+import style from './NavigationMenuItem.module.scss';
+
+interface NavigationMenuItemProps {
+  active?: boolean;
+  className?: string;
+  onClick: () => void;
+}
+
+export default function NavigationMenuItem({
+  active,
+  className,
+  children,
+  onClick,
+}: PropsWithChildren<NavigationMenuItemProps>) {
+  return (
+    <div
+      className={cx([style.link, active && style.current, className])}
+      tabIndex={0}
+      role='button'
+      onClick={onClick}
+      onKeyDown={(event) => {
+        isKeyEnter(event) && onClick();
+      }}
+    >
+      {children}
+    </div>
+  );
+}