add explore navigation

src/app/(sidebars)/(feed)/c/[community]/page.tsx

@@ -8,7 +8,6 @@ const endpoint = "/api/posts";
 
 const home = async ({ params }: { params: { community: string } }) => {
   const { posts, nextCursor } = await getInitialFeed(params.community);
-  const { isAuthenticated } = await getLensClient();
 
   if (!posts) {
     throw new Error("Failed to get posts");
@@ -25,7 +24,7 @@ const home = async ({ params }: { params: { community: string } }) => {
 };
 
 const getInitialFeed = async (community: string) => {
-  const { client, isAuthenticated, profileId } = await getLensClient();
+  const { client } = await getLensClient();
 
   const data = await client.publication
     .fetchAll({

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

@@ -3,7 +3,6 @@ import { ServerSignedIn } from "~/components/ServerSignedIn";
 import { Navigation } from "~/components/menu/Navigation";
 import PostWizard from "~/components/post/PostWizard";
 import { Card } from "~/components/ui/card";
-import { Separator } from "~/components/ui/separator";
 import { getLensClient } from "~/utils/getLensClient";
 
 export default async function layout({ children }: PropsWithChildren) {
@@ -12,7 +11,6 @@ export default async function layout({ children }: PropsWithChildren) {
   return (
     <Card className="z-[30] hover:bg-card p-4 py-0 border-0">
       <ServerSignedIn>
-        {/* <Separator className="max-w-sm mx-auto" /> */}
         <Navigation />
         <div className="pb-4">
           <PostWizard user={user} />

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

@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from "react";
+import { ServerSignedIn } from "~/components/ServerSignedIn";
+import { ExploreNavigation } from "~/components/menu/Navigation";
+import PostWizard from "~/components/post/PostWizard";
+import { Card } from "~/components/ui/card";
+import { getLensClient } from "~/utils/getLensClient";
+
+export default async function layout({ children }: PropsWithChildren) {
+  const { user } = await getLensClient();
+
+  return (
+    <Card className="z-[30] hover:bg-card p-4 py-0 border-0">
+      <ServerSignedIn>
+        <ExploreNavigation />
+        <div className="pb-4">
+          <PostWizard user={user} />
+        </div>
+      </ServerSignedIn>
+      {children}
+    </Card>
+  );
+}

src/components/menu/Navigation.tsx

@@ -2,6 +2,7 @@
 
 import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
 import {
+  AtSignIcon,
   Bitcoin,
   CameraIcon,
   CircleSlashIcon,
@@ -23,6 +24,7 @@ import {
   PlusCircleIcon,
   SproutIcon,
   TreeDeciduousIcon,
+  TrendingUpIcon,
   WrenchIcon,
 } from "lucide-react";
 import Link from "next/link";
@@ -48,17 +50,9 @@ export const Navigation = () => {
             <CrownIcon size={18} />
             best
           </NavigationCarouselItem>
-          <NavigationCarouselItem href={"/explore/curated"}>
-            <NewspaperIcon size={18} />
-            explore
-          </NavigationCarouselItem>
-          <NavigationCarouselItem href={"/explore/collected"}>
-            <PlusCircleIcon size={18} />
-            collect
-          </NavigationCarouselItem>
-          <NavigationCarouselItem href={"/explore/latest"}>
-            <ClockIcon size={18} />
-            latest
+          <NavigationCarouselItem href={"/c/pingpad"}>
+            <AtSignIcon size={18} />
+            pingpad
           </NavigationCarouselItem>
           <NavigationCarouselItem href={"/c/orbcommunitieslens"}>
             <SproutIcon size={18} />
@@ -139,6 +133,29 @@ 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">
+      <NavigationItem href={"/explore/curated"}>
+        <NewspaperIcon size={18} />
+        explore
+      </NavigationItem>
+      <NavigationItem href={"/explore/collected"}>
+        <PlusCircleIcon size={18} />
+        collected
+      </NavigationItem>
+      <NavigationItem href={"/explore/latest"}>
+        <ClockIcon size={18} />
+        latest
+      </NavigationItem>
+      <NavigationItem href={"/explore/trends"} disabled>
+        <TrendingUpIcon size={18} />
+        trending
+      </NavigationItem>
+    </nav>
+  );
+};
+
 export const NavigationItem = ({
   children,
   href,
@@ -166,7 +183,7 @@ export const NavigationCarouselItem = ({
   disabled = false,
 }: PropsWithChildren<{ href: string; disabled?: boolean }>) => {
   return (
-    <CarouselItem className="basis-auto pl-1">
+    <CarouselItem className="basis-1/3 pl-1">
       <NavigationItem href={href} disabled={disabled}>
         {children}
       </NavigationItem>