sticky header

Technoculture · Nov 15, 2023 · e872eb5 · e872eb5
1 parent dddbc89
commit e872eb5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 33 deletions.
diff --git a/src/app/[uid]/layout.tsx b/src/app/[uid]/layout.tsx
@@ -1,5 +1,4 @@
 import { Header } from "@/components/header";
-import { OrganizationSwitcher, auth } from "@clerk/nextjs";
 export const dynamic = "force-dynamic",
   revalidate = 0;
 
@@ -8,19 +7,11 @@ export default function LoggedInLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const { sessionClaims } = auth();
-  const orgs: Object = sessionClaims?.organizations as Object;
-
   return (
-    <>
+    <div className="relative">
       <Header>
-        {Object.keys(orgs).length !== 0 ? (
-          <div className="mr-4 h-[32px] px-2">
-            <OrganizationSwitcher hidePersonal={true} />
-          </div>
-        ) : null}
       </Header>
-      <div className="pl-5 pr-5">{children}</div>
-    </>
+      <div className="pl-5 pr-5 z-10 relative">{children}</div>
+    </div>
   );
 }
diff --git a/src/app/[uid]/page.tsx b/src/app/[uid]/page.tsx
@@ -4,7 +4,7 @@ import { redirect } from "next/navigation";
 import { db } from "@/lib/db";
 import { chats, Chat as ChatSchema } from "@/lib/db/schema";
 import { eq, desc, ne, and } from "drizzle-orm";
-import { auth } from "@clerk/nextjs";
+import { auth, OrganizationSwitcher } from "@clerk/nextjs";
 import Startnewchatbutton from "@/components/startnewchatbutton";
 import ChatCardWrapper from "@/components/chatcardwrapper";
 // import Uploadzone from "@/components/uploadzone";
@@ -30,7 +30,7 @@ export default async function Page({ params }: { params: { uid: string } }) {
   }
 
   return (
-    <div className="grid gap-4 grid-cols-1">
+    <div className="grid gap-4 grid-cols-1 relative">
       {!isOrgExist ? (
         <div>
           You are not a member in any Organisations.{" "}
@@ -41,25 +41,22 @@ export default async function Page({ params }: { params: { uid: string } }) {
           </Button>
         </div>
       ) : (
-        <div>
-          <div>
-            <div>
-              <Startnewchatbutton
-                org_id={sessionClaims?.org_id as string}
-                org_slug={sessionClaims?.org_slug as string}
-              />
-              <ChatCardWrapper
-                initialData={orgConversations}
-                org_id={sessionClaims?.org_id}
-                uid={uid}
-                org_slug={sessionClaims?.org_slug as string}
-              />
+        <div className="relative">
+          <div className="sticky z-20 bg-background py-1.5 top-[72px] flex justify-between">
+            <Startnewchatbutton
+              org_id={sessionClaims?.org_id as string}
+              org_slug={sessionClaims?.org_slug as string}
+            />
+            <div className="h-[32px]">
+              <OrganizationSwitcher hidePersonal={true} />
             </div>
-            {/* <Uploadzone
-              orgId={sessionClaims.org_id as string}
-              className="my-4 border"
-            /> */}
           </div>
+          <ChatCardWrapper
+            initialData={orgConversations}
+            org_id={sessionClaims?.org_id}
+            uid={uid}
+            org_slug={sessionClaims?.org_slug as string}
+          />
         </div>
       )}
     </div>

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -29,7 +29,10 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(
   ({ className, variant, ...props }: HeaderProps = {}, ref) => {
     return (
       <header
-        className={cn(headerVariants({ variant, className }), "z-50")}
+        className={cn(
+          headerVariants({ variant, className }),
+          "z-50 bg-background sticky top-0",
+        )}
         ref={ref}
         {...props}
       >
@@ -46,7 +49,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(
             <h1 className="text-gray-200 align-middle">Echoes</h1>
           </Link>
           <SignedIn>
-            <div className="flex">
+            <div className="flex justify-between">
               {props.children}
               <UserButton />
             </div>