fix: add mixin for navigation item and refactor (#179)

Author: NikitaCG

src/navigation/components/NavigationItem/NavigationItem.tsx

@@ -1,6 +1,5 @@
 import React, {MouseEventHandler, useMemo} from 'react';
 
-import {block} from '../../../utils';
 import {NavigationItemType, NavigationItemData} from '../../../models';
 import SocialIcon from '../SocialIcon/SocialIcon';
 
@@ -9,10 +8,6 @@ import {NavigationDropdown} from './components/NavigationDropdown/NavigationDrop
 import {NavigationLink} from './components/NavigationLink/NavigationLink';
 import {GithubStars} from './components/GithubStars/GithubStars';
 
-import './NavigationItem.scss';
-
-const b = block('navigation-item');
-
 export interface NavigationItemProps {
     data: NavigationItemData;
     className?: string;
@@ -35,7 +30,7 @@ const NavigationItem: React.FC<NavigationItemProps> = ({data, className, ...prop
     const Component = NavigationItemsMap[type];
     const componentProps = useMemo(
         () => ({
-            className: b(null, className),
+            className,
             ...data,
             ...props,
         }),

src/navigation/components/NavigationItem/components/GithubStars/GithubStars.scss

@@ -1,8 +1,11 @@
 @import '../../../../../../styles/variables';
+@import '../../mixins';
 
 $block: '.#{$ns}github-stars';
 
 #{$block} {
+    @include navigation-item-display();
+
     display: flex;
     align-items: center;
     height: 100%;

src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.scss

@@ -1,9 +1,14 @@
 @import '../../../../../../styles/variables';
+@import '../../mixins';
 
 $block: '.#{$ns}navigation-dropdown';
 
 #{$block} {
-    margin-left: 7px;
+    @include navigation-item-display();
 
-    color: var(--yc-color-text-secondary);
+    &__arrow {
+        margin-left: 7px;
+
+        color: var(--yc-color-text-secondary);
+    }
 }

src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.tsx

@@ -21,15 +21,16 @@ export const NavigationDropdown: React.FC<NavigationDropdownProps> = ({
     text,
     icon,
     isOpened,
+    className,
     ...props
 }) => {
     const iconData = icon && getMediaImage(icon);
 
     return (
-        <span {...props}>
+        <span {...props} className={b(null, className)}>
             <ContentWrapper text={text} icon={iconData} />
             <ToggleArrow
-                className={b()}
+                className={b('arrow')}
                 size={TOGGLE_ARROW_SIZE}
                 type={'vertical'}
                 iconType="navigation"

src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.scss

@@ -1,10 +1,12 @@
 @import '../../../../../../styles/variables';
 @import '../../../../../../styles/mixins';
+@import '../../mixins';
 
 $block: '.#{$ns}navigation-link';
 
 #{$block} {
     @include navigation-item();
+    @include navigation-item-display();
 
     &__arrow {
         position: relative;

…nents/NavigationItem/NavigationItem.scss …on/components/NavigationItem/mixins.scsssrc/navigation/components/NavigationItem/NavigationItem.scss renamed to src/navigation/components/NavigationItem/mixins.scss src/navigation/components/NavigationItem/NavigationItem.scss renamed to src/navigation/components/NavigationItem/mixins.scss

@@ -1,8 +1,4 @@
-@import '../../../../styles/variables';
-
-$block: '.#{$ns}navigation-item';
-
-#{$block} {
+@mixin navigation-item-display {
     position: relative;
 
     display: flex;