#First Commit

components/AccountMenu.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { signOut } from 'next-auth/react'
+
+const AccountMenu = () => {
+  return (
+    <div>AccountMenu</div>
+  )
+}
+
+export default AccountMenu

components/MobileMenu.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+interface MobileMenuProps {
+    visible?: boolean;
+}
+
+const MobileMenu: React.FC<MobileMenuProps> = ({visible}) => {
+    if(!visible){
+        return null;
+    }
+    return (
+    <div className='bg-black w-56 absolute top-8 left-0 py-5 flex flex-col border-2 border-gray-800'>
+        <div className='flex flex-col gap-4'>
+            <div className='px-3 text-center text-white hover:underline'>
+                Home
+            </div>
+            <div className='px-3 text-center text-white hover:underline'>
+                Serie TV
+            </div>
+            <div className='px-3 text-center text-white hover:underline'>
+                Film
+            </div>
+            <div className='px-3 text-center text-white hover:underline'>
+                Nuovi e Popolari
+            </div>
+            <div className='px-3 text-center text-white hover:underline'>
+                La mia Lista
+            </div>
+            <div className='px-3 text-center text-white hover:underline'>
+                Sfoglia per lingua
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default MobileMenu

components/Navbar.tsx

@@ -0,0 +1,49 @@
+import MobileMenu from "./MobileMenu"
+import NavbarItem from "./NavbarItem"
+import { BsChevronDown,BsSearch,BsBell } from "react-icons/bs"
+import { useCallback,useState } from "react"
+import AccountMenu from "./AccountMenu";
+
+function Navbar() {
+  const [showMobileMenu,setShowMobileMenu] = useState(false);
+  const toggleMobileMenu = useCallback(()=>{
+    setShowMobileMenu((currentvisible) => !currentvisible)
+  },[])
+  return (
+    <nav className="w-full fixed z-40">
+      <div className="px-4 md:px-16 py-6 flex flex-row items-center transition duration-500 bg-zinc-900 bg-opacity-90">
+        <img className="h-10 lg:h-16" src="https://i.imgur.com/6awt6G7.png" alt="Logo" />
+        <div className="flex-row ml-8 gap-7 hidden lg:flex">
+          <NavbarItem label="Home"/>
+          <NavbarItem label="Serie TV"/>
+          <NavbarItem label="Film"/>
+          <NavbarItem label="Nuovi e Popolari"/>
+          <NavbarItem label="La mia Lista"/>
+          <NavbarItem label="Sfoglia per lingua"/>
+        </div>
+        <div onClick={toggleMobileMenu} className="lg:hidden flex flex-row items-center gap-2 ml-8 cursor-pointer relative">
+          <p className="text-white text-sm">Sfoglia</p>
+          <BsChevronDown className="text-white transition" />
+          <MobileMenu visible={showMobileMenu} />
+        </div>
+        <div className="flex flex-row ml-auto gap-7 items-center">
+          <div className="text-gray-200 hover:text-gray-300 cursor-pointer transition ">
+            <BsSearch />
+          </div>
+          <div className="text-gray-200 hover:text-gray-300 cursor-pointer transition ">
+            <BsBell />
+          </div>
+          <div className="flex flex-row items-center gap-2 cursor-pointer relative">
+            <div className="w-6 h-6 lg:w-10 lg:h-10 rounded-md overflow-hidden">
+              <img src="https://api.dicebear.com/6.x/fun-emoji/svg?seed=Michael" alt="Profilo" />            
+            </div>
+            <BsChevronDown className="text-white transition" />
+          </div>
+          <AccountMenu />
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar

components/NavbarItem.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+interface NavbarItemProps {
+    label: String;
+}
+
+const NavbarItem: React.FC<NavbarItemProps> = ({label}) => {
+  return (
+    <div className="text-white cursor-pointer hover:text-gray-300 transition">
+    {label}
+    </div>
+  )
+}
+
+export default NavbarItem

pages/auth.tsx

@@ -19,7 +19,6 @@ const Auth = () => {
             await signIn('credentials', {
                 email,
                 password,
-                redirect: false,
                 callbackUrl: '/profiles'
             });
         } catch (err) {
@@ -79,13 +78,13 @@ const Auth = () => {
                             {variant === 'login' ? 'Login' : 'Crea Account'}
                         </button>
                         <div onClick={() => signIn('google', {
-                            callbackUrl: '/'
+                            callbackUrl: '/profiles'
                         })} className="flex flex-row items-center gap-4 mt-8 justify-center">
                             <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center cursor-pointer hover:opacity-80 transition">
                                 <FcGoogle size={30} />
                             </div>
                             <div onClick={() => signIn('github', {
-                                callbackUrl: '/'
+                                callbackUrl: '/profiles'
                             })} className="w-10 h-10 bg-white rounded-full flex items-center justify-center cursor-pointer hover:opacity-80 transition">
                                 <FaGithub size={30} />
                             </div>

pages/index.tsx

@@ -1,3 +1,4 @@
+import Navbar from "@/components/Navbar"
 import useCurrentUser from "@/hooks/useCurrentUser"
 import { NextPageContext } from "next"
 import { signOut,getSession } from "next-auth/react"
@@ -19,11 +20,9 @@ export async function getServerSideProps(context: NextPageContext){
 
 
 export default function Home() {
-  const { data: user } = useCurrentUser();
   return (
     <>
-    <h1 className='text-2xl'>Netflix Clone</h1>
-    <button onClick={() => signOut()} className="h-10 w-full bg-white">Logout</button>
+    <Navbar />
     </>
   )
 }

pages/profiles.tsx

@@ -1,5 +1,7 @@
+import useCurrentUser from "@/hooks/useCurrentUser";
 import { NextPageContext } from "next"
 import { getSession } from "next-auth/react"
+import { useRouter } from "next/router";
 
 export async function getServerSideProps(context: NextPageContext){
     const session = await getSession(context);
@@ -18,8 +20,27 @@ export async function getServerSideProps(context: NextPageContext){
 
 
 function Profiles() {
+    const router = useRouter();
+    const { data:user } = useCurrentUser();
   return (
-    <div className="text-white text-4xl">Profili</div>
+    <div className="flex items-center h-full justify-center">
+        <div className="flex flex-col">
+            <h1 className="text-3xl md:text-6xl text-white text-center">Chi sta guardando? </h1>
+            <div className="flex items-center justify-center gap-8 mt-10">
+                <div onClick={() => router.push('/')}>
+                    <div className="group flex-row w-44 mx-auto">
+                        <div className="w-44 h-44 rounded-md flex items-center justify-center border-2 border-transparent group-hover:cursor-pointer group:hover:border-white overflow-hidden">
+                            <img src="https://api.dicebear.com/6.x/fun-emoji/svg?seed=Michael" alt="Profilo" />
+                        </div>
+                        <div className="mt-4 text-gray-400 text-2xl text-center group-hover:text-white group-hover:cursor-pointer">
+                            {user?.name}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {/* https://api.dicebear.com/6.x/fun-emoji/svg?seed= */}
+    </div>
   )
 }