prifile page and nav bar made responsive

odeta939 · Oct 20, 2023 · 6da021a · 6da021a
1 parent 736ceb4
commit 6da021a
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 32 deletions.
diff --git a/vinoa-web/app/globals.css b/vinoa-web/app/globals.css
@@ -2,17 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
-
 body {
   @apply bg-white;
   @apply text-black;
-
-  min-height: 100vh;
+  min-height: 100dvh;
 }
 
-nav li{
+nav li {
   @apply bg-[#F5F5F5];
   @apply rounded-md;
   @apply px-4;
   @apply py-2;
-}
+}
diff --git a/vinoa-web/components/Navigation/Navigation.tsx b/vinoa-web/components/Navigation/Navigation.tsx
@@ -6,14 +6,14 @@ import { usePathname } from 'next/navigation';
 const Navigation = () => {
   const path = usePathname();
   return (
-    <nav className='p-4'>
-      <div className='flex place-items-center justify-between text-l'>
-        <div className='flex items-center'>
+    <nav className='max-w-screen w-full fixed bottom-0 md:static md:top-0 p-4 bg-white'>
+      <div className='grid md:grid-cols-2  text-l'>
+        <div className='md:block items-center hidden'>
           <Link href={'/'}>
             <Logo color='#800020' />
           </Link>
         </div>
-        <ul className='flex justify-end items-center gap-6 '>
+        <ul className='grid grid-cols-3 content-center gap-4'>
           <li
             className={`${path == '/' && 'ring-2 ring-black rounded-md'} ${
               path != '/' && 'hover:underline-offset-4 hover:underline'

diff --git a/vinoa-web/components/UserProfile/UserProfile.tsx b/vinoa-web/components/UserProfile/UserProfile.tsx
@@ -4,6 +4,8 @@ import WineCard from '../WineCard';
 import { useEffect } from 'react';
 import { useSanityUserStore, useUserStore } from '@/store/store';
 import LoginButton from '../LoginButton';
+import Logo from '@/lib/assets/Logo';
+import Link from 'next/link';
 
 const UserProfile = () => {
   const globalUser = useUserStore((state) => state.user);
@@ -31,33 +33,40 @@ const UserProfile = () => {
     fetchData();
   }, [globalUser.session]);
 
-  console.log(globalUser, 'globalUser');
   console.log(sanityUser, 'sanityUser');
-  if (sanityUser) {
+  if (sanityUser && sanityUser.name != '') {
     return (
-      <div className='flex flex-col items-center pt-12 h-full gap-10'>
-        <ProfileLogo />
-        <div className='flex flex-row gap-3'>
-          <p>{sanityUser.name}</p>|
+      <div className='flex flex-col md:pt-4'>
+        <div className='md:hidden grid justify-center'>
+          <Link href={'/'}>
+            <Logo color='#800020' />
+          </Link>
+        </div>
+        <div className='place-self-center'>
+          <ProfileLogo />
+        </div>
+        <div className='flex flex-col lg:flex-row lg:ring gap-3 place-self-center'>
+          <p className='p-4'>{sanityUser.name}</p>
           <LoginButton />
         </div>
-        <div className='text-center m-14 grid xl:grid-cols-4 lg:grid-cols-2 md:grid-cols-1'>
+
+        <div className='mx-8 grid grid-flow-row  md:grid-cols-2 lg:grid-cols-3'>
           {sanityUser.wines &&
             sanityUser.wines.map((wine) => (
               <WineCard key={wine._id} wine={wine} />
             ))}
           {!sanityUser.wines ||
             (sanityUser.wines.length === 0 && (
-              <p className=''>Wines you tasted will be shown here</p>
+              <p>Wines you tasted will be shown here</p>
             ))}
         </div>
       </div>
     );
   } else {
     return (
-      <>
+      <div className='grid justify-center pt-32'>
         <LoginButton />
-      </>
+      </div>
     );
   }
 };