style: new transition between modal tabs

src/components/Elements/MainModal/Main.jsx

@@ -1,9 +1,15 @@
 import variables from 'config/variables';
 import { Suspense, lazy, useState, memo } from 'react';
-import { MdClose } from 'react-icons/md';
+import { MdSettings, MdOutlineShoppingBasket, MdOutlineExtension, MdClose } from 'react-icons/md';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Button } from 'components/Elements';
 
 import './scss/index.scss';
 import { Tooltip } from 'components/Elements';
+/*import Settings from '../../../features/misc/views/Settings';
+import Addons from '../../../features/misc/views/Addons';
+import Marketplace from '../../../features/misc/views/Marketplace';*/
+
 const Settings = lazy(() => import('../../../features/misc/views/Settings'));
 const Addons = lazy(() => import('../../../features/misc/views/Addons'));
 const Marketplace = lazy(() => import('../../../features/misc/views/Marketplace'));
@@ -26,28 +32,234 @@ const renderLoader = () => (
   </div>
 );
 
+const navbarLogo = (
+  <svg
+    width="123"
+    height="123"
+    viewBox="0 0 123 123"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="w-[40px] h-[40px]"
+  >
+    <g filter="url(#filter0_d_2473_27)">
+      <circle cx="61.5" cy="61.5" r="50.5" fill="url(#paint0_linear_2473_27)" />
+      <path
+        d="M68.2969 43.1796V48.5603H79.9348V60.1055H85.3638V43.1796H68.2969Z"
+        fill="url(#paint1_linear_2473_27)"
+      />
+      <path
+        d="M72.1542 61.0483H67.344V65.8527H62.9056V61.0483H58.0919V56.6185H62.9056V51.8175H67.344V56.6185H72.1542V61.0483ZM78.6447 49.6043H67.034V45.5766H47.5625V72.0938H82.6836V61.1961H78.6447V49.6043Z"
+        fill="url(#paint2_linear_2473_27)"
+      />
+      <path
+        d="M46.358 50.518H42.6289V77.0352H77.75V73.3029H46.358V50.518Z"
+        fill="url(#paint3_linear_2473_27)"
+      />
+      <path
+        d="M41.4205 55.4516H37.6914V81.9688H72.8125V78.2365H41.4205V55.4516Z"
+        fill="url(#paint4_linear_2473_27)"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_2473_27"
+        x="0.3"
+        y="0.3"
+        width="122.4"
+        height="122.4"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="5.35" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2473_27" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2473_27" result="shape" />
+      </filter>
+      <linearGradient
+        id="paint0_linear_2473_27"
+        x1="104.324"
+        y1="35.24"
+        x2="16.959"
+        y2="88.366"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#FF5C25" />
+        <stop offset="0.484375" stop-color="#D21A11" />
+        <stop offset="1" stop-color="#FF456E" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_2473_27"
+        x1="76.8303"
+        y1="60.1055"
+        x2="76.8303"
+        y2="43.1796"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#F18D91" />
+        <stop offset="1" stop-color="#FBD3C6" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_2473_27"
+        x1="65.123"
+        y1="72.0938"
+        x2="65.123"
+        y2="45.5766"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#F18D91" />
+        <stop offset="1" stop-color="#FBD3C6" />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_2473_27"
+        x1="60.1895"
+        y1="77.0352"
+        x2="60.1895"
+        y2="50.518"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#F18D91" />
+        <stop offset="1" stop-color="#FBD3C6" />
+      </linearGradient>
+      <linearGradient
+        id="paint4_linear_2473_27"
+        x1="55.252"
+        y1="81.9688"
+        x2="55.252"
+        y2="55.4516"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#F18D91" />
+        <stop offset="1" stop-color="#FBD3C6" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+let tabs = [
+  { id: 'settings', label: 'Settings', icon: <MdSettings /> },
+  { id: 'addons', label: 'Addons', icon: <MdOutlineExtension /> },
+  { id: 'marketplace', label: 'Marketplace', icon: <MdOutlineShoppingBasket /> },
+];
+
 function MainModal({ modalClose }) {
-  const [currentTab, setCurrentTab] = useState('settings');
+  let [activeTab, setActiveTab] = useState(tabs[0].id);
+  const [direction, setDirection] = useState(1);
+
+  const variants = {
+    enter: (direction) => ({
+      x: direction > 0 ? '100%' : '-100%',
+      opacity: 0,
+      overflow: 'none',
+      top: '80px',
+      position: 'absolute',
+      width: '100%',
+    }),
+    center: {
+      x: 0,
+      opacity: 1,
+      overflow: 'none',
+      top: '80px',
+      position: 'absolute',
+      width: '100%',
+    },
+    exit: (direction) => ({
+      x: direction < 0 ? '100%' : '-100%',
+      opacity: 0,
+      overflow: 'none',
+      top: '80px',
+      position: 'absolute',
+      width: '100%',
+    }),
+  };
 
   const changeTab = (type) => {
-    setCurrentTab(type);
+    const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);
+    const newIndex = tabs.findIndex((tab) => tab.id === type);
+
+    setDirection(newIndex > currentIndex ? 1 : -1);
+    setActiveTab(type);
   };
 
   const renderTab = () => {
-    switch (currentTab) {
+    switch (activeTab) {
       case 'addons':
-        return <Addons modalClose={modalClose} changeTab={changeTab} />;
+        return <Addons modalClose={modalClose} />;
       case 'marketplace':
-        return <Marketplace modalClose={modalClose} changeTab={changeTab} />;
+        return <Marketplace modalClose={modalClose} />;
       default:
-        return <Settings modalClose={modalClose} changeTab={changeTab} />;
+        return <Settings modalClose={modalClose} />;
     }
   };
 
   return (
-    <div className="frame">
-      <Suspense fallback={renderLoader()}>{renderTab()}</Suspense>
-    </div>
+    <>
+      <div className="flex flex-col w-[100%] min-w-[100%]">
+        <div className="flex flex-row gap-5 p-5 items-center">
+          {navbarLogo}
+          <div
+            className="flex flex-row gap-5"
+            style={{ marginLeft: 'auto', justifySelf: 'flex-end' }}
+          >
+            <div className="flex space-x-1">
+              {tabs.map((tab) => (
+                <button
+                  key={tab.id}
+                  onClick={() => changeTab(tab.id)}
+                  className={`${
+                    activeTab === tab.id ? '' : 'hover:text-white/60'
+                  } flex flex-row gap-5 items-center relative rounded-sm px-3 py-1.5 text-sm text-white outline-sky-400 transition focus-visible:outline-2`}
+                  style={{
+                    WebkitTapHighlightColor: 'transparent',
+                  }}
+                >
+                  {activeTab === tab.id && (
+                    <motion.span
+                      layoutId="bubble"
+                      className="absolute inset-0 z-10 bg-[#333] mix-blend-lighten rounded-xl"
+                      transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
+                    />
+                  )}
+                  {tab.icon}
+                  {variables.getMessage(`modals.main.navbar.${tab.id}`)}
+                </button>
+              ))}
+            </div>
+            <Tooltip
+              style={{ marginLeft: 'auto', justifySelf: 'flex-end' }}
+              title={variables.getMessage('modals.welcome.buttons.close')}
+              key="closeTooltip"
+            >
+              <span className="closeModal" onClick={modalClose}>
+                <MdClose />
+              </span>
+            </Tooltip>
+          </div>
+        </div>
+        <AnimatePresence initial={false} custom={direction}>
+          <motion.div
+            key={activeTab}
+            custom={direction}
+            variants={variants}
+            initial="enter"
+            animate="center"
+            exit="exit"
+            transition={{ type: 'tween', duration: 0.8 }}
+            className="flex w-[100%] min-w-[100%]"
+          >
+            <Suspense fallback={renderLoader()}>{renderTab()}</Suspense>
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </>
   );
 }
 

src/components/Elements/MainModal/backend/Tab.jsx

@@ -88,7 +88,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
     label === variables.getMessage('modals.main.settings.sections.experimental.title') &&
     !isExperimental
   ) {
-    return <hr />;
+    return null;
   }
 
   return (

src/components/Elements/MainModal/backend/Tabs.jsx

@@ -1,5 +1,6 @@
 import variables from 'config/variables';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
+import { motion } from 'framer-motion';
 import {
   MdSettings,
   MdOutlineShoppingBasket,
@@ -19,7 +20,6 @@ const Tabs = (props) => {
     if (name !== currentName) {
       variables.stats.postEvent('tab', `Opened ${name}`);
     }
-
     setCurrentTab(tab);
     setCurrentName(name);
   };
@@ -29,218 +29,61 @@ const Tabs = (props) => {
     document.querySelector('.reminder-info').style.display = 'none';
   };
 
-  const navbarButtons = [
-    {
-      tab: 'settings',
-      icon: <MdSettings />,
-    },
-    {
-      tab: 'addons',
-      icon: <MdOutlineExtension />,
-    },
-    {
-      tab: 'marketplace',
-      icon: <MdOutlineShoppingBasket />,
-    },
-  ];
-
-  const reminderInfo = (
-    <div
-      className="reminder-info"
-      style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
-    >
-      <div className="shareHeader">
-        <span className="title">{variables.getMessage('modals.main.settings.reminder.title')}</span>
-        <span className="closeModal" onClick={hideReminder}>
-          <MdClose />
+  const reminderInfo = useMemo(
+    () => (
+      <div
+        className="reminder-info"
+        style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
+      >
+        <div className="shareHeader">
+          <span className="title">
+            {variables.getMessage('modals.main.settings.reminder.title')}
+          </span>
+          <span className="closeModal" onClick={hideReminder}>
+            <MdClose />
+          </span>
+        </div>
+        <span className="subtitle">
+          {variables.getMessage('modals.main.settings.reminder.message')}
         </span>
+        <button onClick={() => window.location.reload()}>
+          <MdRefresh />
+          {variables.getMessage('modals.main.error_boundary.refresh')}
+        </button>
       </div>
-      <span className="subtitle">
-        {variables.getMessage('modals.main.settings.reminder.message')}
-      </span>
-      <button onClick={() => window.location.reload()}>
-        <MdRefresh />
-        {variables.getMessage('modals.main.error_boundary.refresh')}
-      </button>
-    </div>
-  );
-
-  const navbarLogo = (
-    <svg
-      width="123"
-      height="123"
-      viewBox="0 0 123 123"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="w-[40px] h-[40px]"
-    >
-      <g filter="url(#filter0_d_2473_27)">
-        <circle cx="61.5" cy="61.5" r="50.5" fill="url(#paint0_linear_2473_27)" />
-        <path
-          d="M68.2969 43.1796V48.5603H79.9348V60.1055H85.3638V43.1796H68.2969Z"
-          fill="url(#paint1_linear_2473_27)"
-        />
-        <path
-          d="M72.1542 61.0483H67.344V65.8527H62.9056V61.0483H58.0919V56.6185H62.9056V51.8175H67.344V56.6185H72.1542V61.0483ZM78.6447 49.6043H67.034V45.5766H47.5625V72.0938H82.6836V61.1961H78.6447V49.6043Z"
-          fill="url(#paint2_linear_2473_27)"
-        />
-        <path
-          d="M46.358 50.518H42.6289V77.0352H77.75V73.3029H46.358V50.518Z"
-          fill="url(#paint3_linear_2473_27)"
-        />
-        <path
-          d="M41.4205 55.4516H37.6914V81.9688H72.8125V78.2365H41.4205V55.4516Z"
-          fill="url(#paint4_linear_2473_27)"
-        />
-      </g>
-      <defs>
-        <filter
-          id="filter0_d_2473_27"
-          x="0.3"
-          y="0.3"
-          width="122.4"
-          height="122.4"
-          filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
-        >
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="5.35" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2473_27" />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_2473_27"
-            result="shape"
-          />
-        </filter>
-        <linearGradient
-          id="paint0_linear_2473_27"
-          x1="104.324"
-          y1="35.24"
-          x2="16.959"
-          y2="88.366"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#FF5C25" />
-          <stop offset="0.484375" stop-color="#D21A11" />
-          <stop offset="1" stop-color="#FF456E" />
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_2473_27"
-          x1="76.8303"
-          y1="60.1055"
-          x2="76.8303"
-          y2="43.1796"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#F18D91" />
-          <stop offset="1" stop-color="#FBD3C6" />
-        </linearGradient>
-        <linearGradient
-          id="paint2_linear_2473_27"
-          x1="65.123"
-          y1="72.0938"
-          x2="65.123"
-          y2="45.5766"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#F18D91" />
-          <stop offset="1" stop-color="#FBD3C6" />
-        </linearGradient>
-        <linearGradient
-          id="paint3_linear_2473_27"
-          x1="60.1895"
-          y1="77.0352"
-          x2="60.1895"
-          y2="50.518"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#F18D91" />
-          <stop offset="1" stop-color="#FBD3C6" />
-        </linearGradient>
-        <linearGradient
-          id="paint4_linear_2473_27"
-          x1="55.252"
-          y1="81.9688"
-          x2="55.252"
-          y2="55.4516"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#F18D91" />
-          <stop offset="1" stop-color="#FBD3C6" />
-        </linearGradient>
-      </defs>
-    </svg>
+    ),
+    [],
   );
 
   return (
-    <div className="flex flex-col w-[100%] min-w-[100%]">
-      <div className="flex flex-row gap-5 p-5 items-center">
-        {navbarLogo}
-        {/*<span className="text-2xl font-bold">{currentTab}</span>*/}
-        <div
-          className="flex flex-row gap-5"
-          style={{ marginLeft: 'auto', justifySelf: 'flex-end' }}
-        >
-          {navbarButtons.map(({ tab, icon }, index) => (
-            <Button
-              type="navigation"
-              onClick={() => props.changeTab(tab)}
-              icon={icon}
-              label={variables.getMessage(`modals.main.navbar.${tab}`)}
-              active={props.current === tab}
-              key={`${tab}-${index}`}
+    <>
+      {props.current === 'settings' && (
+        <div className="modalSidebar">
+          {props.children.map((tab, index) => (
+            <Tab
+              currentTab={currentTab}
+              key={index}
+              label={tab.props.label}
+              onClick={(nextTab) => onClick(nextTab, tab.props.name)}
+              navbarTab={props.navbar || false}
             />
           ))}
-          <Tooltip
-            style={{ marginLeft: 'auto', justifySelf: 'flex-end' }}
-            title={variables.getMessage('modals.welcome.buttons.close')}
-            key="closeTooltip"
-          >
-            <span className="closeModal" onClick={props.modalClose}>
-              <MdClose />
-            </span>
-          </Tooltip>
+          {reminderInfo}
         </div>
-      </div>
-      <div className="flex w-[100%] min-w-[100%]">
-        {props.current === 'settings' && (
-          <div className="modalSidebar">
-            {props.children.map((tab, index) => (
-              <Tab
-                currentTab={currentTab}
-                key={index}
-                label={tab.props.label}
-                onClick={(nextTab) => onClick(nextTab, tab.props.name)}
-                navbarTab={props.navbar || false}
-              />
-            ))}
-            {reminderInfo}
-          </div>
-        )}
-        <div className="modalTabContent">
-          {props.children.map((tab, index) => {
-            if (tab.props.label !== currentTab) {
-              return undefined;
-            }
+      )}
+      <div className="modalTabContent">
+        {props.children.map((tab, index) => {
+          if (tab.props.label !== currentTab) {
+            return null;
+          }
 
-            return (
-              <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
-            );
-          })}
-        </div>
+          return (
+            <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
+          );
+        })}
       </div>
-    </div>
+    </>
   );
 };
 
-export default Tabs;
+export default React.memo(Tabs);