menu rewritten with radix-ui

2022-09-06 18:59:29 +03:00
1 parent e8a4ba054b
commit c9628678d8
@@ -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",
@@ -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",
@@ -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"
-
-const Navigation = dynamic<NavigationProps>(() => import("../Navigation").then(mod => mod.Navigation), {
-    ssr: false,
-})
+import { Navigation } from "@/components/Navigation"

 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}>
@@ -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>
-    )
-}
@@ -1,27 +1,45 @@
 import s from "./styles.module.css"

-import cx from "classnames"
-import { MenuItem } from "./MenuItem"
-import { IMenu } from "src/types"
+import { IMenu } from "@/types"
+import * as NavigationMenu from "@radix-ui/react-navigation-menu"
+import classnames from "classnames/bind"
+import { useRouter } from "next/router"
+import { ActiveLink } from "./ActiveLink"

-const layoutClass = {
-    desktop: s.desktop,
-    mobile: s.mobile,
-}
+let cx = classnames.bind(s)
+
+export type MenuLayout = "desktop" | "mobile"

 export type MenuProps = {
-    layout: "desktop" | "mobile"
+    layout: MenuLayout
    items: IMenu[]
 }

-export const Menu: React.FC<MenuProps> = props => (
-    <menu className={cx(s.menu, layoutClass[props.layout])}>
-        {props.items.map((item, index) => (
-            <MenuItem key={index}
-                href={item.href}
-            >
-                {item.name}
-            </MenuItem>
-        ))}
-    </menu>
-)
+export const Menu: React.FC<MenuProps> = ({ layout, items }) => {
+    const router = useRouter()
+    return (
+        <NavigationMenu.Root>
+            <NavigationMenu.List className={cx(s.menu, layout)}>
+                {
+                    items.map(item => {
+                        const current = router.asPath === item.href
+                        const href = current ? undefined : item.href
+
+                        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>
+    )
+}
@@ -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 {
-    position: relative;
-    border-top: var(--menu-mark-thickness) solid rgba(0, 0, 0, 0);
+.menuItem {
+    user-select: none;
+    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 */
-
-.mobile li {
-    font-size: var(--font-size-default);
-
-    padding: var(--size-xs) var(--size-s);
+.menuItem.active {
+    cursor: pointer;
 }

-.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 {
-     color: var(--color-text-opposite)
-}
- 
-/* MENU ITEM DESKTOP */
-
-.desktop li {
-    padding: var(--size-xs) var(--size-s);
-}
-
-.desktop li.selected {
-    border-top-color: var(--color-back-opposite);
+.menuItem a {
+    text-decoration: none;
+    color: var(--color-text);
 }
@@ -19,12 +19,10 @@ export const Navigation: React.FC<NavigationProps> = props => {

    if (!collapseMenu) {
        return (
-            <nav style={props.style}>
-                <Menu
-                    layout={"desktop"}
-                    items={menu}
-                />
-            </nav>
+            <Menu
+                layout={"desktop"}
+                items={menu}
+            />
        )
    }

@@ -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 ""
@@ -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);
 }
@@ -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 {
-    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 {
+/* a.invisible {
    border-bottom: none;
-}
+} */

 .opposite a {
    color: var(--color-text-opposite);