From fbe5a92b494d84f0b0ddb9f53fbf71c90d6c70a7 Mon Sep 17 00:00:00 2001
From: Mattia <32470461+Megio@users.noreply.github.com>
Date: Fri, 11 Aug 2023 18:37:49 +0200
Subject: [PATCH] [next-react-query] fix: next react query fixed header and
 dropdown menu (#1912)

* fix: next react query fixed header and dropdown menu

* fix: navbar storybook
---
 .../src/components/NavBar/NavBar.stories.tsx           | 10 +++++++++-
 .../src/components/NavBar/NavBar.tsx                   |  4 ++--
 next-react-query-tailwind/src/pages/[owner]/index.tsx  |  4 ++--
 next-react-query-tailwind/src/pages/_app.tsx           |  4 ++--
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/next-react-query-tailwind/src/components/NavBar/NavBar.stories.tsx b/next-react-query-tailwind/src/components/NavBar/NavBar.stories.tsx
index 56b552ee8..887db499d 100644
--- a/next-react-query-tailwind/src/components/NavBar/NavBar.stories.tsx
+++ b/next-react-query-tailwind/src/components/NavBar/NavBar.stories.tsx
@@ -22,7 +22,15 @@ export default {
 
 const Template: StoryFn<RepoContext> = (args) => (
   <RepoProvider value={args}>
-    <SessionProvider>
+    <SessionProvider
+      session={{
+        user: {
+          name: 'test',
+          email: 'test@test.com',
+        },
+        expires: '',
+      }}
+    >
       <NavBar />
     </SessionProvider>
   </RepoProvider>
diff --git a/next-react-query-tailwind/src/components/NavBar/NavBar.tsx b/next-react-query-tailwind/src/components/NavBar/NavBar.tsx
index 359f420da..942d8a6af 100644
--- a/next-react-query-tailwind/src/components/NavBar/NavBar.tsx
+++ b/next-react-query-tailwind/src/components/NavBar/NavBar.tsx
@@ -7,14 +7,14 @@ import styles from './NavBar.module.css';
 function NavBar() {
   const { data: session } = useSession();
   const user = session?.user;
-  return (
+  return user ? (
     <header className={styles.header}>
       <Link href="/">
         <GitHubLogo />
       </Link>
       <div>{user && <UserDropdown image={user.image} />}</div>
     </header>
-  );
+  ) : null;
 }
 
 export default NavBar;
diff --git a/next-react-query-tailwind/src/pages/[owner]/index.tsx b/next-react-query-tailwind/src/pages/[owner]/index.tsx
index 0368a0e1a..e893f9865 100644
--- a/next-react-query-tailwind/src/pages/[owner]/index.tsx
+++ b/next-react-query-tailwind/src/pages/[owner]/index.tsx
@@ -11,7 +11,7 @@ const UserProfilePage: NextPage = () => {
   return (
     <ProfilePage owner={query.owner}>
       {({ username }) => (
-        <div className="relative pt-8">
+        <div className="relative">
           <div className="border-b border-gray-200 sticky top-0 bg-white z-20  hidden md:block">
             <div className="grid grid-cols-12 gap-8 max-w-screen-2xl mx-auto">
               <div className="col-span-12 md:col-span-4 xl:col-span-3" />
@@ -22,7 +22,7 @@ const UserProfilePage: NextPage = () => {
           </div>
           <div className="max-w-screen-2xl mx-auto py-8 px-4">
             <div className="grid grid-cols-12 gap-8">
-              <div className="col-span-12 md:col-span-4 xl:col-span-3 relative md:-top-20">
+              <div className="col-span-12 md:col-span-4 xl:col-span-3 md:-top-20">
                 <UserProfile username={username} />
               </div>
               <div className="col-span-12 md:col-span-8 xl:col-span-9">
diff --git a/next-react-query-tailwind/src/pages/_app.tsx b/next-react-query-tailwind/src/pages/_app.tsx
index 1da21877b..bdbf1d038 100644
--- a/next-react-query-tailwind/src/pages/_app.tsx
+++ b/next-react-query-tailwind/src/pages/_app.tsx
@@ -2,7 +2,7 @@ import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { SessionProvider } from 'next-auth/react';
+import { SessionProvider, useSession } from 'next-auth/react';
 
 import NavBar from '@components/NavBar';
 
@@ -30,7 +30,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
         refetchOnWindowFocus={false}
         refetchInterval={60 * 5}
       >
-        {session?.user && <NavBar />}
+        <NavBar />
         <Component {...pageProps} />
         <ReactQueryDevtools />
       </SessionProvider>