fix: menu adaptive

frontend/src/app/providers/layout/navigation/navigation.tsx

@@ -39,60 +39,48 @@ export const Navigation = () => {
       }}
     >
       <div className="flex items-center justify-between px-4 py-2.5">
-        {/* Логотип */}
+        {/* Навигация с горизонтальным скроллом */}
-        <div
+        <div className="flex items-center flex-1 mx-4 overflow-x-auto scrollbar-hide">
-          className="flex items-center gap-2 cursor-pointer"
+          <div className="flex items-center gap-1 whitespace-nowrap">
-          onClick={() => navigate("/")}
+            {navItems
-        >
+              .filter((item) => {
-          <FaServer style={{ color: "var(--accent)", fontSize: "18px" }} />
+                if (item.adminOnly && !user?.permission_admin) return false;
-          <span
+                return true;
-            className="text-sm font-semibold"
+              })
-            style={{ color: "var(--text-primary)" }}
+              .map((item) => {
-          >
+                const Icon = item.icon;
-            HellreigN
+                const active = isActive(item.path);
-          </span>
+                return (
-        </div>
+                  <button
-
+                    key={item.path}
-        {/* Навигация */}
+                    onClick={() => navigate(item.path)}
-        <div className="flex items-center gap-1">
+                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all flex-shrink-0"
-          {navItems
+                    style={{
-            .filter((item) => {
+                      backgroundColor: active ? "var(--accent)" : "transparent",
-              if (item.adminOnly && !user?.permission_admin) return false;
+                      color: active
-              return true;
+                        ? "var(--accent-text)"
-            })
+                        : "var(--text-secondary)",
-            .map((item) => {
+                    }}
-              const Icon = item.icon;
+                    onMouseEnter={(e) => {
-              const active = isActive(item.path);
+                      if (!active) {
-              return (
+                        e.currentTarget.style.backgroundColor =
-                <button
+                          "var(--bg-secondary)";
-                  key={item.path}
+                        e.currentTarget.style.color = "var(--text-primary)";
-                  onClick={() => navigate(item.path)}
+                      }
-                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all"
+                    }}
-                  style={{
+                    onMouseLeave={(e) => {
-                    backgroundColor: active ? "var(--accent)" : "transparent",
+                      if (!active) {
-                    color: active
+                        e.currentTarget.style.backgroundColor = "transparent";
-                      ? "var(--accent-text)"
+                        e.currentTarget.style.color = "var(--text-secondary)";
-                      : "var(--text-secondary)",
+                      }
-                  }}
+                    }}
-                  onMouseEnter={(e) => {
+                  >
-                    if (!active) {
+                    <Icon size={12} />
-                      e.currentTarget.style.backgroundColor =
+                    <span>{item.label}</span>
-                        "var(--bg-secondary)";
+                  </button>
-                      e.currentTarget.style.color = "var(--text-primary)";
+                );
-                    }
+              })}
-                  }}
+          </div>
-                  onMouseLeave={(e) => {
-                    if (!active) {
-                      e.currentTarget.style.backgroundColor = "transparent";
-                      e.currentTarget.style.color = "var(--text-secondary)";
-                    }
-                  }}
-                >
-                  <Icon size={12} />
-                  <span>{item.label}</span>
-                </button>
-              );
-            })}
         </div>
 
         {/* Профиль пользователя */}

frontend/src/shared/styles/index.css

@@ -2,3 +2,13 @@
 @import "./normalize.css";
 @import "./root.css";
 @import "./themes.css";
+
+/* Hide scrollbar but keep functionality */
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+}