update navigation

src/app/(sidebars)/(feed)/layout.tsx

@@ -16,7 +16,7 @@ export default async function layout({ children }: PropsWithChildren) {
     <Card className="z-[30] hover:bg-card p-4 py-0 border-0">
       <ServerSignedIn>
         <Navigation />
-        <div className="pb-4">
+        <div className="py-4">
           <PostWizard user={user} />
         </div>
       </ServerSignedIn>

src/app/page.tsx

@@ -31,7 +31,7 @@ const LandingPage = () => {
           </div>
         </div>
 
-        <div className="grid md:grid-cols-2 px-auto grow items-center justify-center py-10 mt-16 text-3xl p-8 text-center drop-shadow-md dark:drop-shadow-glow place-items-center flex flex-col gap-6 justify-center">
+        <div className="grid md:grid-cols-2 px-auto grow items-center justify-center py-10 mt-16 text-3xl p-8 text-center drop-shadow-md dark:drop-shadow-glow place-items-center flex-col gap-6">
           <div className="col-span-1 flex flex-col gap-2">
             <FadeIn className="duration-1000 delay-100">
               <h1>

src/components/menu/Navigation.tsx

@@ -34,7 +34,7 @@ import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious
 
 export const Navigation = () => {
   return (
-    <nav className="z-[40] w-full max-w-2xl flex flex-row justify-center items-center p-4 px-0 sticky top-0 bg-background/50 backdrop-blur-lg rounded-b-lg overflow-visible">
+    <nav className="z-[40] w-full max-w-2xl flex flex-row justify-center items-center border border-muted p-1 sticky top-1 bg-background/50 backdrop-blur-lg rounded-xl overflow-visible">
       <Carousel
         opts={{ dragFree: true, watchDrag: true, slidesToScroll: 6, loop: true, active: true, align: "start" }}
         plugins={[WheelGesturesPlugin({ active: true })]}
@@ -135,7 +135,7 @@ export const Navigation = () => {
 
 export const ExploreNavigation = () => {
   return (
-    <nav className="z-[40] flex flex-row justify-start items-center gap-2 p-4 px-0 sticky top-0 bg-background/50 backdrop-blur-lg rounded-b-lg overflow-visible">
+    <nav className="z-[40] flex flex-row justify-start items-center gap-2 p-4 px-0 sticky top-1 border border-muted bg-background/50 backdrop-blur-lg rounded-b-lg overflow-visible">
       <NavigationItem href={"/explore/curated"}>
         <NewspaperIcon size={18} />
         explore
@@ -167,8 +167,8 @@ export const NavigationItem = ({
 
   return (
     <Link
-      className={`rounded-md w-max h-10 disabled p-2 overflow-hidden inline-flex gap-1 items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted 
-        hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 
+      className={`rounded-md w-max h-10 disabled p-1 overflow-hidden inline-flex gap-1 items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted
+        hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
       ${selectedStyle(href)} ${disabledStyle}`}
       href={href}
     >

src/components/user/UserNavigation.tsx

@@ -5,7 +5,7 @@ import { NavigationItem } from "../menu/Navigation";
 
 export const UserNavigation = ({ handle }: { handle: string }) => {
   return (
-    <nav className="sticky top-0 bg-background/50 backdrop-blur-lg rounded-b-lg z-[40] flex flex-row justify-start items-center gap-2 py-2 px-4">
+    <nav className="sticky top-1 bg-background/50 backdrop-blur-lg border border-muted rounded-xl z-[40] flex flex-row justify-start items-center gap-2 p-1">
       <NavigationItem href={`/u/${handle}`}>
         <MessageCircle size={18} />
         posts

src/components/user/UserProfile.tsx

@@ -28,7 +28,7 @@ export const UserProfile = async ({ user }: { user?: User }) => {
   const commonInterests = parseInterests(commonInterestTypes);
 
   return (
-    <div className="p-4 z-20 flex w-full flex-row gap-4 border-b border-base-300 bg-base-200/30 bg-card rounded-b-lg drop-shadow-md">
+    <div className="p-4 z-20 flex w-full flex-row gap-4 bg-card drop-shadow-md">
       <div className="flex flex-col gap-2">
         <div className="flex shrink-0 grow-0 w-12 h-12 sm:w-24 sm:h-24">
           <UserAvatar card={false} user={user} />

src/utils/getServerAuth.ts

@@ -1,5 +1,5 @@
 import { LensClient, production } from "@lens-protocol/client";
-import { User, lensProfileToUser } from "~/components/user/User";
+import { type User, lensProfileToUser } from "~/components/user/User";
 import { getCookieAuth } from "./getCookieAuth";
 import { window } from "./globals";