fix: menu adaptive

2026-04-04 07:06:27 +03:00
parent 4f69e002c6
commit eedc9c9b62
2 changed files with 52 additions and 54 deletions
@@ -39,60 +39,48 @@ export const Navigation = () => {
      }}
    >
      <div className="flex items-center justify-between px-4 py-2.5">
-        {/* Логотип */}
-        <div
-          className="flex items-center gap-2 cursor-pointer"
-          onClick={() => navigate("/")}
-        >
-          <FaServer style={{ color: "var(--accent)", fontSize: "18px" }} />
-          <span
-            className="text-sm font-semibold"
-            style={{ color: "var(--text-primary)" }}
-          >
-            HellreigN
-          </span>
-        </div>
-
-        {/* Навигация */}
-        <div className="flex items-center gap-1">
-          {navItems
-            .filter((item) => {
-              if (item.adminOnly && !user?.permission_admin) return false;
-              return true;
-            })
-            .map((item) => {
-              const Icon = item.icon;
-              const active = isActive(item.path);
-              return (
-                <button
-                  key={item.path}
-                  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={{
-                    backgroundColor: active ? "var(--accent)" : "transparent",
-                    color: active
-                      ? "var(--accent-text)"
-                      : "var(--text-secondary)",
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!active) {
-                      e.currentTarget.style.backgroundColor =
-                        "var(--bg-secondary)";
-                      e.currentTarget.style.color = "var(--text-primary)";
-                    }
-                  }}
-                  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 className="flex items-center flex-1 mx-4 overflow-x-auto scrollbar-hide">
+          <div className="flex items-center gap-1 whitespace-nowrap">
+            {navItems
+              .filter((item) => {
+                if (item.adminOnly && !user?.permission_admin) return false;
+                return true;
+              })
+              .map((item) => {
+                const Icon = item.icon;
+                const active = isActive(item.path);
+                return (
+                  <button
+                    key={item.path}
+                    onClick={() => navigate(item.path)}
+                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all flex-shrink-0"
+                    style={{
+                      backgroundColor: active ? "var(--accent)" : "transparent",
+                      color: active
+                        ? "var(--accent-text)"
+                        : "var(--text-secondary)",
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!active) {
+                        e.currentTarget.style.backgroundColor =
+                          "var(--bg-secondary)";
+                        e.currentTarget.style.color = "var(--text-primary)";
+                      }
+                    }}
+                    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>
        </div>

        {/* Профиль пользователя */}
@@ -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 */
+}