menu rewritten with radix-ui

package-lock.json

@@ -9,6 +9,7 @@
             "version": "7.0.0",
             "license": "ISC",
             "dependencies": {
+                "@radix-ui/react-navigation-menu": "^1.0.0",
                 "classnames": "^2.2.6",
                 "date-fns": "^2.11.1",
                 "lodash": "^4.17.21",
@@ -373,6 +374,227 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@radix-ui/primitive": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
+            "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "node_modules/@radix-ui/react-collection": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.0.tgz",
+            "integrity": "sha512-8i1pf5dKjnq90Z8udnnXKzdCEV3/FYrfw0n/b6NvB6piXEn3fO1bOh7HBcpG8XrnIXzxlYu2oCcR38QpyLS/mg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.0",
+                "@radix-ui/react-context": "1.0.0",
+                "@radix-ui/react-primitive": "1.0.0",
+                "@radix-ui/react-slot": "1.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
+            "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-context": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
+            "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-direction": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz",
+            "integrity": "sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-dismissable-layer": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz",
+            "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.0",
+                "@radix-ui/react-compose-refs": "1.0.0",
+                "@radix-ui/react-primitive": "1.0.0",
+                "@radix-ui/react-use-callback-ref": "1.0.0",
+                "@radix-ui/react-use-escape-keydown": "1.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-id": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
+            "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-layout-effect": "1.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-navigation-menu": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.0.0.tgz",
+            "integrity": "sha512-HbwG3A9z9zdcan0076EbTXqMvmQeesC3nOMEL7XtWqBnxPo8MLStk0vMs0hjIQ+9O9/KTcEJq+TeRX2pUuvuSg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.0",
+                "@radix-ui/react-collection": "1.0.0",
+                "@radix-ui/react-compose-refs": "1.0.0",
+                "@radix-ui/react-context": "1.0.0",
+                "@radix-ui/react-direction": "1.0.0",
+                "@radix-ui/react-dismissable-layer": "1.0.0",
+                "@radix-ui/react-id": "1.0.0",
+                "@radix-ui/react-presence": "1.0.0",
+                "@radix-ui/react-primitive": "1.0.0",
+                "@radix-ui/react-use-callback-ref": "1.0.0",
+                "@radix-ui/react-use-controllable-state": "1.0.0",
+                "@radix-ui/react-use-layout-effect": "1.0.0",
+                "@radix-ui/react-use-previous": "1.0.0",
+                "@radix-ui/react-visually-hidden": "1.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-presence": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+            "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.0",
+                "@radix-ui/react-use-layout-effect": "1.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-primitive": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz",
+            "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-slot": "1.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-slot": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz",
+            "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-use-callback-ref": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
+            "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
+            "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-callback-ref": "1.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-use-escape-keydown": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz",
+            "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-callback-ref": "1.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+            "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-use-previous": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz",
+            "integrity": "sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
+        "node_modules/@radix-ui/react-visually-hidden": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz",
+            "integrity": "sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-primitive": "1.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            }
+        },
         "node_modules/@rushstack/eslint-patch": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz",
@@ -4245,6 +4467,173 @@
                 "fastq": "^1.6.0"
             }
         },
+        "@radix-ui/primitive": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
+            "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "@radix-ui/react-collection": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.0.tgz",
+            "integrity": "sha512-8i1pf5dKjnq90Z8udnnXKzdCEV3/FYrfw0n/b6NvB6piXEn3fO1bOh7HBcpG8XrnIXzxlYu2oCcR38QpyLS/mg==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.0",
+                "@radix-ui/react-context": "1.0.0",
+                "@radix-ui/react-primitive": "1.0.0",
+                "@radix-ui/react-slot": "1.0.0"
+            }
+        },
+        "@radix-ui/react-compose-refs": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
+            "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "@radix-ui/react-context": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
+            "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "@radix-ui/react-direction": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz",
+            "integrity": "sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "@radix-ui/react-dismissable-layer": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz",
+            "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.0",
+                "@radix-ui/react-compose-refs": "1.0.0",
+                "@radix-ui/react-primitive": "1.0.0",
+                "@radix-ui/react-use-callback-ref": "1.0.0",
+                "@radix-ui/react-use-escape-keydown": "1.0.0"
+            }
+        },
+        "@radix-ui/react-id": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
+            "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-layout-effect": "1.0.0"
+            }
+        },
+        "@radix-ui/react-navigation-menu": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.0.0.tgz",
+            "integrity": "sha512-HbwG3A9z9zdcan0076EbTXqMvmQeesC3nOMEL7XtWqBnxPo8MLStk0vMs0hjIQ+9O9/KTcEJq+TeRX2pUuvuSg==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.0",
+                "@radix-ui/react-collection": "1.0.0",
+                "@radix-ui/react-compose-refs": "1.0.0",
+                "@radix-ui/react-context": "1.0.0",
+                "@radix-ui/react-direction": "1.0.0",
+                "@radix-ui/react-dismissable-layer": "1.0.0",
+                "@radix-ui/react-id": "1.0.0",
+                "@radix-ui/react-presence": "1.0.0",
+                "@radix-ui/react-primitive": "1.0.0",
+                "@radix-ui/react-use-callback-ref": "1.0.0",
+                "@radix-ui/react-use-controllable-state": "1.0.0",
+                "@radix-ui/react-use-layout-effect": "1.0.0",
+                "@radix-ui/react-use-previous": "1.0.0",
+                "@radix-ui/react-visually-hidden": "1.0.0"
+            }
+        },
+        "@radix-ui/react-presence": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+            "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.0",
+                "@radix-ui/react-use-layout-effect": "1.0.0"
+            }
+        },
+        "@radix-ui/react-primitive": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz",
+            "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-slot": "1.0.0"
+            }
+        },
+        "@radix-ui/react-slot": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz",
+            "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.0"
+            }
+        },
+        "@radix-ui/react-use-callback-ref": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
+            "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "@radix-ui/react-use-controllable-state": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
+            "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-callback-ref": "1.0.0"
+            }
+        },
+        "@radix-ui/react-use-escape-keydown": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz",
+            "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-callback-ref": "1.0.0"
+            }
+        },
+        "@radix-ui/react-use-layout-effect": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+            "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "@radix-ui/react-use-previous": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz",
+            "integrity": "sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "@radix-ui/react-visually-hidden": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz",
+            "integrity": "sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-primitive": "1.0.0"
+            }
+        },
         "@rushstack/eslint-patch": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz",

package.json

@@ -18,6 +18,7 @@
     "author": "Roman Timashev",
     "license": "ISC",
     "dependencies": {
+        "@radix-ui/react-navigation-menu": "^1.0.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.11.1",
         "lodash": "^4.17.21",

src/components/App/index.tsx

@@ -1,4 +1,3 @@
-import dynamic from "next/dynamic"
 import { Wrapper } from "../Wrapper"
 import { ConfigContext } from "src/context/ConfigContext"
 import config from "src/config"
@@ -10,11 +9,7 @@ import { IBreadcumbsPart, IMenu } from "src/types"
 import { useRouter } from "next/router"
 import { useMobile } from "src/hooks/useMobile"
 import { Gosuslugi } from "../Gosuslugi"
-import { NavigationProps } from "@/components/Navigation"
+import { Navigation } from "@/components/Navigation"
-
-const Navigation = dynamic<NavigationProps>(() => import("../Navigation").then(mod => mod.Navigation), {
-    ssr: false,
-})
 
 export type AppProps = {
     showAuthor?: boolean
@@ -40,7 +35,7 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                 header={(
                     <header>
                         <Navigation style={{
-                            margin: "0 var(--size-m) var(--size-m)",
+                            // margin: "0 var(--size-m) var(--size-m)",
                         }} />
                         {hideBreadcrumbs || !props.breadcrumbs ? null : (
                             <Block direction={"horizontal"} style={blockStyle}>

src/components/Menu/MenuItem.tsx

@@ -1,35 +0,0 @@
-import s from "./styles.module.css"
-import cx from "classnames"
-import { useRouter } from "next/router"
-import { ActiveLink } from "./ActiveLink"
-import { isPartOfPath } from "src/lib/url"
-
-export type MenuItemProps = {
-    href: string
-    children?: React.ReactNode
-}
-
-export const MenuItem: React.FC<MenuItemProps> = props => {
-    const ignore = ["/"]
-    const router = useRouter()
-    const current = router.asPath === props.href
-    const selected = current || (!ignore.includes(props.href) && isPartOfPath(props.href, router.asPath))
-    const href = current ? undefined : props.href
-
-    return (
-        <li
-            className={cx({
-                [s.selected]: selected,
-            })}
-        >
-            <ActiveLink
-                href={href}
-                activeStyle={{
-                    fontWeight: "bold",
-                }}
-            >
-                {props.children}
-            </ActiveLink>
-        </li>
-    )
-}

src/components/Menu/index.tsx

@@ -1,27 +1,45 @@
 import s from "./styles.module.css"
 
-import cx from "classnames"
+import { IMenu } from "@/types"
-import { MenuItem } from "./MenuItem"
+import * as NavigationMenu from "@radix-ui/react-navigation-menu"
-import { IMenu } from "src/types"
+import classnames from "classnames/bind"
+import { useRouter } from "next/router"
+import { ActiveLink } from "./ActiveLink"
 
-const layoutClass = {
+let cx = classnames.bind(s)
-    desktop: s.desktop,
+
-    mobile: s.mobile,
+export type MenuLayout = "desktop" | "mobile"
-}
 
 export type MenuProps = {
-    layout: "desktop" | "mobile"
+    layout: MenuLayout
     items: IMenu[]
 }
 
-export const Menu: React.FC<MenuProps> = props => (
+export const Menu: React.FC<MenuProps> = ({ layout, items }) => {
-    <menu className={cx(s.menu, layoutClass[props.layout])}>
+    const router = useRouter()
-        {props.items.map((item, index) => (
+    return (
-            <MenuItem key={index}
+        <NavigationMenu.Root>
-                href={item.href}
+            <NavigationMenu.List className={cx(s.menu, layout)}>
-            >
+                {
-                {item.name}
+                    items.map(item => {
-            </MenuItem>
+                        const current = router.asPath === item.href
-        ))}
+                        const href = current ? undefined : item.href
-    </menu>
+
-)
+                        if (!href) {
+                            return (
+                                <NavigationMenu.Item key={item.href} className={`${s.menuItem} ${s.current}`}>
+                                    <ActiveLink>{item.name}</ActiveLink>
+                                </NavigationMenu.Item>
+                            )
+                        }
+                        return (
+                            <NavigationMenu.Item key={item.href} className={`${s.menuItem} ${s.active}`}>
+                                <ActiveLink href={item.href}>{item.name}</ActiveLink>
+                            </NavigationMenu.Item>
+                        )
+                    })
+                }
+            </NavigationMenu.List>
+        </NavigationMenu.Root>
+    )
+}

src/components/Menu/styles.module.css

@@ -3,8 +3,12 @@
     align-items: flex-start;
     flex-wrap: wrap;
 
+    gap: var(--size-m);
+
     font-size: var(--font-size-second);
     list-style: none;
+
+    padding: var(--size-s);
 }
 
 /* MENU LAYOUT */
@@ -19,34 +23,28 @@
 
 /* MENU ITEM */
 
-.menu li {
+.menuItem {
-    position: relative;
+    user-select: none;
-    border-top: var(--menu-mark-thickness) solid rgba(0, 0, 0, 0);
+    background-color: var(--color-back-main);
+    border-radius: var(--size-s);
+    transition: box-shadow 200ms ease-in;
+    padding: var(--size-s) var(--size-s);
 }
 
-/* MENU ITEM MOBILE */
+.menuItem.active {
-
+    cursor: pointer;
-.mobile li {
-    font-size: var(--font-size-default);
-
-    padding: var(--size-xs) var(--size-s);
 }
 
-.mobile li.selected {
+.menuItem.active:hover {
+    box-shadow: var(--shadow);
+}
+
+.menuItem.current {
+    color: var(--color-text-opposite);
     background-color: var(--color-back-opposite);
-    color: var(--color-text-opposite)
 }
 
-.mobile li.selected a {
+.menuItem a {
-     color: var(--color-text-opposite)
+    text-decoration: none;
-}
+    color: var(--color-text);
- 
-/* MENU ITEM DESKTOP */
-
-.desktop li {
-    padding: var(--size-xs) var(--size-s);
-}
-
-.desktop li.selected {
-    border-top-color: var(--color-back-opposite);
 }

src/components/Navigation/index.tsx

@@ -19,12 +19,10 @@ export const Navigation: React.FC<NavigationProps> = props => {
 
     if (!collapseMenu) {
         return (
-            <nav style={props.style}>
+            <Menu
-                <Menu
+                layout={"desktop"}
-                    layout={"desktop"}
+                items={menu}
-                    items={menu}
+            />
-                />
-            </nav>
         )
     }
 

src/lib/url.ts

@@ -1,7 +1,3 @@
-export function isPartOfPath(part: string, path: string): boolean {
-    return path.startsWith(part)
-}
-
 export function queryList(key: string, values: string[]): string {
     if (values.length === 0) {
         return ""

src/style/article.css

@@ -2,6 +2,21 @@
     hyphens: auto;
 }
 
+.article a {
+    color: var(--color-text);
+
+    text-decoration: none;
+    border-bottom: 1px solid var(--color-link);
+}
+
+.article a:hover {
+    border-bottom: 2px solid var(--color-text);
+}
+
+.article a:active {
+    border-width: 2px;
+}
+
 .article h1 {
     margin-bottom: var(--size-l);
 }

src/style/style.css

@@ -44,14 +44,16 @@
 
     /* EFFECTS */
     --radius: 16px;
-    --shadow: 0 0 8px var(--color-shadow);
+    --shadow:
+        0 2px 4px rgba(27, 51, 88, 0.2),
+        0 4px 8px -8px rgba(0, 0, 0, 0.2),
+        0 8px 16px -8px rgba(0, 0, 0, 0.3);
     --shadow-active:
         0 12px 24px -8px rgba(27, 51, 88, 0.25),
         0 8px 16px -8px rgba(0, 0, 0, 0.3);
 
     /* SPECIAL */
     --article-line-height: 1.5em;
-    --menu-mark-thickness: 4px;
     --embed-video-ratio: 56.25%;
 
     /* CONTENT */
@@ -108,24 +110,9 @@ h3 {
     hyphens: none;
 }
 
-a {
+/* a.invisible {
-    color: var(--color-text);
-
-    text-decoration: none;
-    border-bottom: 1px solid var(--color-link);
-}
-
-a:hover {
-    border-bottom: 2px solid var(--color-text);
-}
-
-a:active {
-    border-width: 2px;
-}
-
-a.invisible {
     border-bottom: none;
-}
+} */
 
 .opposite a {
     color: var(--color-text-opposite);