[next-react-query] fix: next react query fixed header and dropdown me…

…nu (#1912) * fix: next react query fixed header and dropdown menu * fix: navbar storybook
thisdot · Aug 11, 2023 · fbe5a92 · fbe5a92
1 parent 1ceeb00
commit fbe5a92
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 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
@@ -22,7 +22,15 @@ export default {
 
 const Template: StoryFn<RepoContext> = (args) => (
   <RepoProvider value={args}>
-    <SessionProvider>
+    <SessionProvider
+      session={{
+        user: {
+          name: 'test',
+          email: '[email protected]',
+        },
+        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
@@ -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
@@ -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
@@ -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>