fixed layout animations in navbar

Stephen-Gordon · Apr 21, 2024 · 8e75a16 · 8e75a16
1 parent a8018ce
commit 8e75a16
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 19 deletions.
diff --git a/src/app/@auth/(.)confirm/page.tsx b/src/app/@auth/(.)confirm/page.tsx
@@ -96,7 +96,7 @@ export default function Page({ showConfirm }: ConfirmProps) {
       transition={{ duration: 0.5, ease: 'easeInOut' }}
       >
       <DrawerHeader>
-        <DrawerTitle className='grid grid-cols-3 items-center'>
+        <DrawerTitle className='grid grid-cols-3 items-center pt-2'>
          <motion.div
             key={'back'}
             layoutId='back'

diff --git a/src/app/@auth/(.)payee/page.tsx b/src/app/@auth/(.)payee/page.tsx
@@ -144,11 +144,10 @@ export default function Page() {
     <>
       <AnimatePresence>
         <DrawerHeader>
-          <DrawerTitle className='grid grid-cols-3 items-center pt-2'>
+          <DrawerTitle className='grid grid-cols-3 items-center pt-2 h-6'>
             <motion.div
               className='w-auto'
               key={'back'}
-              layoutId='back'
               onClick={() => {
                 router.back();
               }}
@@ -162,27 +161,27 @@ export default function Page() {
             >
               {payeeAddress && useFindPayeeName(payeeAddress, contactsState)}
             </motion.p>
-            {!isInContacts && (
+           {!isInContacts && (
               <motion.div
-                layout
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 className='ml-auto'
               >
                 <div
                   onClick={handleAddUser}
-                  className='text-muted-foreground flex content-center items  text-base font-light'
+                  className='text-muted-foreground flex content-center '
                 >
                   <span>
                     <UserPlus
-                      strokeWidth={2}
-                      className='fill-muted-foreground stroke-muted-foreground h-auto '
+                      strokeWidth={1}
+                      size={20}
+                      className='fill-muted-foreground stroke-muted-foreground '
                     />
                   </span>
                 </div>{' '}
               </motion.div>
-            )}
+            )} 
           </DrawerTitle>
         </DrawerHeader>
         <motion.div

diff --git a/src/app/@auth/(.)search/page.tsx b/src/app/@auth/(.)search/page.tsx
@@ -84,7 +84,7 @@ export default function Page() {
   return (
     <>
       <DrawerHeader>
-        <DrawerTitle className='grid grid-cols-3 items-center'>
+        <DrawerTitle className='grid grid-cols-3 pt-2 h-6'>
           <motion.div key={'back'} layoutId='back'>
             <BackButton
               onClick={() => {
@@ -93,9 +93,7 @@ export default function Page() {
               }}
             />
           </motion.div>
-          <p className='text-center font-normal'>
-            Search
-          </p>
+          <p className='text-center'>Search</p>
           <div className='ml-auto'></div>
         </DrawerTitle>
       </DrawerHeader>
@@ -128,7 +126,7 @@ export default function Page() {
               {payee !== '' && (
                 <motion.div
                   key='clear'
-                  initial={{ opacity: 0, }}
+                  initial={{ opacity: 0 }}
                   animate={{
                     opacity: 1,
                   }}
@@ -226,7 +224,6 @@ export default function Page() {
           {payee == '' && (
             <>
               <motion.div
-
                 key='search-page-check'
                 initial={{ opacity: 0 }}
                 animate={{

diff --git a/src/app/@auth/(.)send/page.tsx b/src/app/@auth/(.)send/page.tsx
@@ -35,7 +35,7 @@ export default function Page() {
   return (
     <>
       <DrawerHeader>
-        <DrawerTitle className='grid grid-cols-3 items-center'>
+        <DrawerTitle className='grid grid-cols-3 items-center pt-2'>
           <motion.div
             key={'back'}
             layoutId='back'
@@ -61,7 +61,7 @@ export default function Page() {
                 className='h-auto w-auto'
                 href={{ pathname: `/payee`, query: { payeeAddress: payee } }}
               >
-                <Circle className='fill-muted-foreground stroke-muted-foreground h-auto w-auto rounded-full stroke-1' />
+                <Circle size={20} className='fill-muted-foreground stroke-muted-foreground h-auto w-auto rounded-full stroke-1' />
               </Link>
             </Link>
           </div>

diff --git a/src/app/components/BottomNav/BottomNav.tsx b/src/app/components/BottomNav/BottomNav.tsx
@@ -47,10 +47,10 @@ const BottomNavbar = () => {
       <AnimatePresence>
           <motion.nav
             layout
-            key={'nav'}
+            /* key={'nav'}
              initial={{ opacity: 1, }}
             animate={{ opacity: showNav ? 1 : 0.5, y: showNav ? 0 : 0 }}
-            exit={{ opacity: 0.5, }}
+            exit={{ opacity: 0.5, }} */
             transition={{ duration: 0.4, ease: 'easeIn' }} 
             className='fixed bottom-0 flex h-auto w-full justify-between bg-transparent bg-opacity-0 bg-gradient-to-br from-slate-50/10 p-4 px-8 pb-8 pt-4 backdrop-blur-xl  '
           >