components uses css modules; other refactoring

src/components/Menu/MenuItem.tsx

@@ -1,3 +1,4 @@
+import s from './styles.module.css'
 import cx from 'classnames'
 import { useRouter } from 'next/router'
 import { ActiveLink } from './ActiveLink'
@@ -5,7 +6,6 @@ import { isPartOfPath } from 'src/lib/url'
 
 export type MenuItemProps = {
     href: string
-    layout: 'desktop' | 'mobile'
 }
 
 export const MenuItem: React.FC<MenuItemProps> = props => {
@@ -17,8 +17,8 @@ export const MenuItem: React.FC<MenuItemProps> = props => {
 
     return (
         <li
-            className={cx('menuItem', props.layout, {
-                selected,
+            className={cx({
+                [s.selected]: selected,
             })}
         >
             <ActiveLink

src/components/Menu/index.tsx

@@ -1,20 +1,24 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import cx from 'classnames'
 import { MenuItem } from './MenuItem'
 import { IMenu } from 'src/types'
 
+const layoutClass = {
+    desktop: s.desktop,
+    mobile: s.mobile,
+}
+
 export type MenuProps = {
     layout: 'desktop' | 'mobile'
     items: IMenu[]
 }
 
 export const Menu: React.FC<MenuProps> = props => (
-    <menu className={cx('menu', props.layout)}>
+    <menu className={cx(s.menu, layoutClass[props.layout])}>
         {props.items.map((item, index) => (
             <MenuItem key={index}
                 href={item.href}
-                layout={props.layout}
             >
                 {item.name}
             </MenuItem>

src/components/Menu/styles.module.css

@@ -7,42 +7,42 @@
     list-style: none;
 }
 
-.menu.desktop {
+/* MENU LAYOUT */
+
+.desktop {
     flex-direction: row;
 }
 
-.menu.mobile {
+.mobile {
     flex-direction: column;
 }
 
-.menuItem {
+/* MENU ITEM */
+
+.menu li {
     position: relative;
     border-top: var(--menu-mark-thickness) solid rgba(0, 0, 0, 0);
 }
 
-/* MOBILE */
+/* MENU ITEM MOBILE */
 
-.menuItem.mobile {
+.mobile li {
     font-size: var(--font-size-default);
 
     padding: var(--size-xs) var(--size-s);
 }
 
-.menuItem.mobile.selected {
+.mobile li.selected {
     background-color: var(--color-back-opposite);
     color: var(--color-text-opposite)
 }
 
-.menuItem.mobile.selected a {
-    color: var(--color-text-opposite)
-}
+/* MENU ITEM DESKTOP */
 
-/* DESKTOP */
-
-.menuItem.desktop {
+.desktop li {
     padding: var(--size-xs) var(--size-s);
 }
 
-.menuItem.desktop.selected {
+.desktop li.selected {
     border-top-color: var(--color-back-opposite);
 }