From 286a6145b2ee994a59d3dd11fb1396fb8ee6c84d Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 25 Aug 2022 18:09:10 +0300
Subject: [PATCH] feat: add improved transition animations effect to tabs
 selection

---
 .../Components/StoryForm/StoryForm.tsx        | 16 +++-
 .../pages/EditProfilePage/EditProfilePage.tsx | 77 ++++++++++---------
 2 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
index e18a6d2b..830135d3 100644
--- a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
+++ b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
@@ -14,6 +14,7 @@ import PreviewPostCard from '../PreviewPostCard/PreviewPostCard'
 import { StorageService } from 'src/services';
 import { useThrottledCallback } from '@react-hookz/web';
 import { CreateStoryType, IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage';
+import { LayoutGroup, motion } from 'framer-motion';
 
 interface Props {
     isUpdating?: boolean;
@@ -105,10 +106,17 @@ export default function StoryForm(props: Props) {
 
     return (
         <>
-            <div id='preview-switch' className="flex gap-16">
-                <button type='button' className={`rounded-8 px-16 py-8 ${editMode ? 'bg-primary-100 text-primary-700' : "text-gray-500"} active:scale-95 transition-transform`} onClick={() => setEditMode(true)}>Edit</button>
-                <button type='button' className={`rounded-8 px-16 py-8 ${!editMode ? 'bg-primary-100 text-primary-700' : "text-gray-500"} active:scale-95 transition-transform`} onClick={clickPreview}>Preview</button>
-            </div>
+            <LayoutGroup id='edit-story-mode'>
+                <div id='preview-switch' className="flex gap-16 isolate">
+                    <button type='button' className={`relative px-16 py-8 ${editMode ? 'text-primary-700' : "text-gray-500"} active:scale-95 transition-transform`} onClick={() => setEditMode(true)}>
+                        {editMode && <motion.div layoutId='bg' className="bg-primary-100 rounded-8 absolute inset-0 z-0"></motion.div>}
+                        <span className='relative z-10'>Edit</span>
+                    </button>
+                    <button type='button' className={`relative px-16 py-8 ${!editMode ? 'text-primary-700' : "text-gray-500"} active:scale-95 transition-transform`} onClick={clickPreview}>
+                        {!editMode && <motion.div layoutId='bg' className="bg-primary-100 rounded-8 absolute inset-0 z-0"></motion.div>}
+                        <span className='relative z-10'>Preview</span></button>
+                </div>
+            </LayoutGroup>
             <form
                 id='form'
                 onSubmit={clickSubmit(true)}
diff --git a/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
index 870bf145..467872d0 100644
--- a/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
@@ -9,6 +9,7 @@ import { Helmet } from 'react-helmet'
 import { MEDIA_QUERIES } from "src/utils/theme";
 import PreferencesTab from "./PreferencesTab/PreferencesTab";
 import Card from "src/Components/Card/Card";
+import { LayoutGroup, motion } from "framer-motion";
 
 
 const links = [
@@ -43,43 +44,49 @@ export default function EditProfilePage() {
             </Helmet>
             <div className="page-container grid grid-cols-1 md:grid-cols-4 gap-24">
                 <aside>
-                    {isMediumScreen ?
-                        <Card className="sticky-side-element">
-                            <p className="text-body2 font-bolder text-black mb-16">Edit maker profile</p>
-                            <ul className=' flex flex-col gap-8'>
-                                {links.map((link, idx) =>
-                                    <li key={idx}>
+                    <LayoutGroup id="edit-profile-nav">
+                        {isMediumScreen ?
+                            <Card className="sticky-side-element  isolate">
+                                <p className="text-body2 font-bolder text-black mb-16">Edit maker profile</p>
+                                <ul className=' flex flex-col gap-8'>
+                                    {links.map((link, idx) =>
+                                        <li key={idx}>
+                                            <NavLink
+                                                to={link.path}
+                                                className={({ isActive }) => `
+                                                flex items-start cursor-pointer font-bold p-12 relative rounded-8`}
+                                                children={({ isActive }) => (
+                                                    <>
+                                                        {isActive && <motion.div className="bg-gray-100 absolute inset-0 rounded-8 z-0" layoutId="bg"></motion.div>}
+                                                        <span className="relative z-10">{link.text}</span>
+                                                    </>
+                                                )}
+                                            />
+                                        </li>)}
+                                </ul>
+                            </Card>
+                            :
+                            <div className="border-b-2 border-gray-200">
+                                <Slider>
+                                    {links.map((link, idx) =>
                                         <NavLink
                                             to={link.path}
-                                            className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
-                                 active:scale-95 transition-transform
-                                ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
-                                `}
-                                        >
-                                            {link.text}
-                                        </NavLink>
-                                    </li>)}
-                            </ul>
-                        </Card>
-                        :
-                        <div className="border-b-2 border-gray-200">
-                            <Slider>
-                                {links.map((link, idx) =>
-                                    <NavLink
-                                        to={link.path}
-                                        key={idx}
-                                        className={`flex items-start cursor-pointer font-bold py-12
-                                                active:scale-95 transition-transform`}
-                                        style={({ isActive }) => ({
-                                            boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
-                                        })}
-                                    >
-                                        {link.text}
-                                    </NavLink>
-                                )}
-                            </Slider>
-                        </div>
-                    }
+                                            key={idx}
+                                            className={`flex items-start cursor-pointer font-bold py-12
+                                                active:scale-95 transition-transform relative`}
+
+                                            children={({ isActive }) => (
+                                                <>
+                                                    {isActive && <motion.div className="absolute h-[2px] bottom-0 inset-x-0 bg-primary-500" layoutId="underline"></motion.div>}
+                                                    <span className="relative z-10">{link.text}</span>
+                                                </>
+                                            )}
+                                        />
+                                    )}
+                                </Slider>
+                            </div>
+                        }
+                    </LayoutGroup>
                 </aside>
                 <main className="md:col-span-3">
                     <Routes>