From 0b850e6ae5a835afa71a1564e154acc383593a76 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Fri, 5 Jul 2024 19:01:30 +0500
Subject: [PATCH] scrollbar for tabs

---
 package.json                       |  1 +
 src/components/Layout/Navbar.tsx   |  2 +-
 src/components/Main/Availables.tsx |  3 ++-
 src/components/Main/Products.tsx   |  5 +++--
 src/components/Main/Projects.tsx   |  2 +-
 tailwind.config.js                 | 31 +++++++++++++++---------------
 vite.config.ts                     |  6 +++---
 yarn.lock                          |  5 +++++
 8 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index be63aa8..39a6091 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "postcss": "^8.4.38",
     "prettier": "^3.3.2",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
     "vite": "^5.3.1"
diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx
index 0ce2a6e..7c81e07 100644
--- a/src/components/Layout/Navbar.tsx
+++ b/src/components/Layout/Navbar.tsx
@@ -26,7 +26,7 @@ export function Navbar() {
           <button className="tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma:text-base font-semibold text-[#ffffff] bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] tablet:block mobile:hidden px-10">
             Оставить заявку
           </button>
-          {!menuOpen && <LangToggler lang={lang} />}
+          <LangToggler lang={lang} />
           <button
             onClick={() => setMenuOpen(prev => !prev)}
             className="px-6 py-5 min-[1350px]:hidden mobile:block border-[#3D425C] mobile:max-tablet:border-l"
diff --git a/src/components/Main/Availables.tsx b/src/components/Main/Availables.tsx
index 20d03c5..b64483e 100644
--- a/src/components/Main/Availables.tsx
+++ b/src/components/Main/Availables.tsx
@@ -15,7 +15,8 @@ export function Availables() {
         >
           Многопользовательский
         </span>
-        <br /> режим обучения
+        <br />
+        режим обучения
       </Title>
       <div className="flex mobile:max-desktop:flex-col items-start desktop:w-fit gap-x-4 tablet:pt-5 tablet:border-t border-[#3D425C]">
         <MiniTitle text="возможности" />
diff --git a/src/components/Main/Products.tsx b/src/components/Main/Products.tsx
index 789f0c5..56f0ca6 100644
--- a/src/components/Main/Products.tsx
+++ b/src/components/Main/Products.tsx
@@ -23,7 +23,7 @@ export function Products() {
         </span>
       </Title>
       <MiniTitle className="desktop:hidden" text="Продукты" />
-      <div className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto [-webkit-scroll-bar:_background-color:_red] tablet:max-desktop:mt-[13px] mobile:mt-6 mobile:max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]">
+      <div className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 scrollbar scrollbar-track-inherit scrollbar-thumb-rounded-[4px] scrollbar-h-1 scrollbar-thumb-[#798fff] rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto tablet:max-desktop:mt-[13px] mobile:mt-6 mobile:max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]">
         <TabButton
           className={curTab === 0 ? 'bg-[#798FFF]' : ''}
           onClick={() => setCurTab(0)}
@@ -231,8 +231,9 @@ function SimulatorsTab() {
             }}
           >
             {width < 640 ? (
-              order.map(src => (
+              order.map((src, index) => (
                 <img
+                  key={index}
                   src={src}
                   className="rounded-lg mobile:max-tablet:min-w-[clamp(280px,100vw-80px,559px)] object-cover"
                   alt=""
diff --git a/src/components/Main/Projects.tsx b/src/components/Main/Projects.tsx
index 4ef7bfa..5fe50c4 100644
--- a/src/components/Main/Projects.tsx
+++ b/src/components/Main/Projects.tsx
@@ -154,7 +154,7 @@ function Slider({
         </button>
         <div className="h-1 bg-[#3D425C] w-full">
           <div
-            className="bg-[#ffffff] h-1 duration-400"
+            className="bg-[#ffffff] h-1 duration-500"
             style={{ width: `${((slide + 1) / 3) * 100}%` }}
           />
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index e02db07..57ff385 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,31 +1,30 @@
+import tailwindScrollbar from 'tailwind-scrollbar';
+
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       screens: {
-        "mobile": '360px',
-        "tablet": '640px',
-        "tablet-figma": '768px',
-        "desktop": '1024px',
-        "desktop-figma": '1600px',
+        mobile: '360px',
+        tablet: '640px',
+        'tablet-figma': '768px',
+        desktop: '1024px',
+        'desktop-figma': '1600px',
       },
       colors: {
-        "text-gradient": '-webkit-linear-gradient(#798FFF, #D375FF)'
-      },      animation: {
+        'text-gradient': '-webkit-linear-gradient(#798FFF, #D375FF)',
+      },
+      animation: {
         'infinite-scroll': 'infinite-scroll 25s linear infinite',
       },
       keyframes: {
         'infinite-scroll': {
           from: { transform: 'translateX(0)' },
           to: { transform: 'translateX(-100%)' },
-        }
-      }   
+        },
+      },
     },
   },
-  plugins: [],
-}
-
+  plugins: [tailwindScrollbar({ nocompatible: true })],
+};
diff --git a/vite.config.ts b/vite.config.ts
index 5a33944..627a319 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});
diff --git a/yarn.lock b/yarn.lock
index 3433074..a07d7e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1992,6 +1992,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tailwind-scrollbar@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz#ff7596407b6da5209261d8ff03860ab9206a59e3"
+  integrity sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==
+
 tailwindcss@^3.4.4:
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.4.tgz#351d932273e6abfa75ce7d226b5bf3a6cb257c05"