feat: enhance the appearance of scrollable setting menu in the mobile view

2025-11-30 00:53:14 +00:00 · 2024-10-05 19:17:13 +03:00
parent 802311a06a
commit b05fec93bb
2 changed files with 98 additions and 49 deletions
--- a/frontend/src/components/SettingsBar.tsx
+++ b/frontend/src/components/SettingsBar.tsx
@@ -0,0 +1,96 @@
+import React, { useCallback, useRef, useState } from 'react';
+import ArrowLeft from '../assets/arrow-left.svg';
+import ArrowRight from '../assets/arrow-right.svg';
+import { useTranslation } from 'react-i18next';
+
+type HiddenGradientType = 'left' | 'right' | undefined;
+
+const useTabs = () => {
+  const { t } = useTranslation();
+  const tabs = [
+    t('settings.general.label'),
+    t('settings.documents.label'),
+    t('settings.apiKeys.label'),
+    t('settings.analytics.label'),
+    t('settings.logs.label'),
+  ];
+  return tabs;
+};
+
+interface SettingsBarProps {
+  setActiveTab: React.Dispatch<React.SetStateAction<string>>;
+  activeTab: string;
+}
+
+const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
+  const [hiddenGradient, setHiddenGradient] =
+    useState<HiddenGradientType>('left');
+  const containerRef = useRef<null | HTMLDivElement>(null);
+  const tabs = useTabs();
+  const scrollTabs = useCallback(
+    (direction: number) => {
+      if (containerRef.current) {
+        const container = containerRef.current;
+        container.scrollLeft += direction * 100; // Adjust the scroll amount as needed
+        if (container.scrollLeft === 0) {
+          setHiddenGradient('left');
+        } else if (
+          container.scrollLeft + container.offsetWidth ===
+          container.scrollWidth
+        ) {
+          setHiddenGradient('right');
+        } else {
+          setHiddenGradient(undefined);
+        }
+      }
+    },
+    [containerRef.current],
+  );
+  return (
+    <div className="relative mt-6 flex flex-row items-center space-x-1 md:space-x-0 overflow-auto">
+      <div
+        className={`${hiddenGradient === 'left' ? 'hidden' : ''} md:hidden absolute inset-y-0 left-6 w-14 bg-gradient-to-r from-white dark:from-raisin-black pointer-events-none`}
+      ></div>
+      <div
+        className={`${hiddenGradient === 'right' ? 'hidden' : ''} md:hidden absolute inset-y-0 right-6 w-14 bg-gradient-to-l from-white dark:from-raisin-black pointer-events-none`}
+      ></div>
+
+      <div className="md:hidden z-10">
+        <button
+          onClick={() => scrollTabs(-1)}
+          className="flex h-6 w-6 items-center rounded-full justify-center transition-all hover:bg-gray-100"
+        >
+          <img src={ArrowLeft} alt="left-arrow" className="h-3" />
+        </button>
+      </div>
+      <div
+        ref={containerRef}
+        className="flex flex-nowrap overflow-x-auto no-scrollbar md:space-x-4 scroll-smooth snap-x"
+      >
+        {tabs.map((tab, index) => (
+          <button
+            key={index}
+            onClick={() => setActiveTab(tab)}
+            className={`snap-start h-9 rounded-3xl px-4 font-bold ${
+              activeTab === tab
+                ? 'bg-purple-3000 text-purple-30 dark:bg-dark-charcoal'
+                : 'text-gray-6000'
+            }`}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+      <div className="md:hidden z-10">
+        <button
+          onClick={() => scrollTabs(1)}
+          className="flex h-6 w-6 rounded-full items-center justify-center hover:bg-gray-100"
+        >
+          <img src={ArrowRight} alt="right-arrow" className="h-3" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsBar;