{children}
-
+
+
+ )}
+ All
+
+
+
+ )}
+ {option.name}
+
+
+
+ )}
+ All
+
+
+
+ )}
+ {feed.name}
+
-
+
);
}
diff --git a/src/app/(feed)/layout.tsx b/src/app/(feed)/layout.tsx
index f1e9bc9..ff40862 100644
--- a/src/app/(feed)/layout.tsx
+++ b/src/app/(feed)/layout.tsx
@@ -12,6 +12,8 @@ import { InitialClientQueries } from "~/lib/data/InitialClientQueries";
import FeedLoading from "../loading";
import { isServerAuthed } from "~/server/auth";
import { redirect } from "next/navigation";
+import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
+import { AppLeftSidebar, AppRightSidebar } from "~/components/app-sidebar";
const title = "Serial";
const description = "Your personal content newsletter";
@@ -102,16 +104,29 @@ export default async function RootLayout({
+
{item.title}
@@ -216,11 +217,10 @@ export function TodayItems() { } return ( -
+
-
{filteredFeedItemsOrder.map((contentId) => (
);
}
diff --git a/src/app/(feed)/feed/TopLeftButton.tsx b/src/app/(feed)/feed/TopLeftButton.tsx
index d11fcd4..30fa512 100644
--- a/src/app/(feed)/feed/TopLeftButton.tsx
+++ b/src/app/(feed)/feed/TopLeftButton.tsx
@@ -1,27 +1,59 @@
"use client";
-import { HomeIcon } from "lucide-react";
+import {
+ HomeIcon,
+ MenuIcon,
+ PanelLeftCloseIcon,
+ PanelLeftOpenIcon,
+} from "lucide-react";
import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
-import { UserManagementPopoverButton } from "./UserManagementButton";
+import { usePathname } from "next/navigation";
import { ButtonWithShortcut } from "~/components/ButtonWithShortcut";
+import { useSidebar } from "~/components/ui/sidebar";
export function TopLeftButton() {
const pathname = usePathname();
+ const { toggleSidebar, open, openLeftMobile, isMobile } = useSidebar();
if (pathname !== "/feed") {
return (
-
-
+ toggleSidebar("left")}
+ size="icon"
+ variant="outline"
+ >
+ {isMobile && openLeftMobile &&
-
+ {!open && (
+
+
+
+
+ )}
+
);
}
return (
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {isPending &&
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/app/(feed)/feed/page.tsx b/src/app/(feed)/feed/page.tsx
index 39dba8d..e1c91fd 100644
--- a/src/app/(feed)/feed/page.tsx
+++ b/src/app/(feed)/feed/page.tsx
@@ -1,9 +1,7 @@
-import React from "react";
import { ClientDatetime } from "./ClientDatetime";
import { DateFilterChips } from "./DateFilterChips";
import { ItemVisibilityChips } from "./ItemVisibilityChips";
import { TodayItems } from "./TodayItems";
-import { CategorySelectionChips } from "./CategorySelectionChips";
export default async function Home() {
return (
@@ -21,7 +19,6 @@ export default async function Home() {
+ toggleSidebar("left")}
+ size="icon"
+ variant="outline"
+ >
+ {isMobile && openLeftMobile &&
);
}
diff --git a/src/app/(feed)/feed/TopRightHeaderContent.tsx b/src/app/(feed)/feed/TopRightHeaderContent.tsx
index dab4eb1..6dfe389 100644
--- a/src/app/(feed)/feed/TopRightHeaderContent.tsx
+++ b/src/app/(feed)/feed/TopRightHeaderContent.tsx
@@ -1,24 +1,17 @@
-import { ListIcon } from "lucide-react";
-import Link from "next/link";
-import { ColorThemePopoverButton } from "~/components/color-theme/ColorThemePopoverButton";
import { CustomVideoButton } from "~/components/CustomVideoButton";
-import { Button, ResponsiveButton } from "~/components/ui/button";
+import { OpenRightSidebarButton } from "./OpenRightSidebarButton";
import { RefetchItemsButton } from "./RefetchItemsButton";
export function TopRightHeaderContent() {
return (
-
-
-
);
}
diff --git a/src/app/(feed)/feed/UserManagementButton.tsx b/src/app/(feed)/feed/UserManagementButton.tsx
index 899068e..aef1a9e 100644
--- a/src/app/(feed)/feed/UserManagementButton.tsx
+++ b/src/app/(feed)/feed/UserManagementButton.tsx
@@ -1,18 +1,26 @@
"use client";
-import { Loader2Icon, UserIcon } from "lucide-react";
+import { Loader2Icon, ExpandIcon } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Button } from "~/components/ui/button";
import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from "~/components/ui/popover";
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import {
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ useSidebar,
+} from "~/components/ui/sidebar";
import { authClient, signOut } from "~/lib/auth-client";
import { AUTH_SIGNED_OUT_URL } from "~/server/auth/constants";
-export function UserManagementPopoverButton() {
+export function UserManagementNavItem() {
const {
data,
isPending, //loading state
@@ -20,56 +28,74 @@ export function UserManagementPopoverButton() {
const router = useRouter();
const [isSigningOut, setIsSigningOut] = useState(false);
+ const { isMobile } = useSidebar();
return (
-
+
-
-
- - {data?.user.name || "Serial User"} -
-{data?.user.email}
-
+
+ {" "}
+ {data?.user.name || "Account"}
+
+
+ {data?.user.email}
+
+
+ )}
+
+
+ + {data?.user.name || "Serial User"} +
++ {data?.user.email} +
+{children}
+ 
+ );
+}
diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx
new file mode 100644
index 0000000..60cfddc
--- /dev/null
+++ b/src/components/app-sidebar.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import {
+ IconCamera,
+ IconChartBar,
+ IconDashboard,
+ IconFileAi,
+ IconFileDescription,
+ IconFolder,
+ IconHelp,
+ IconListDetails,
+ IconSearch,
+ IconSettings,
+ IconUsers,
+} from "@tabler/icons-react";
+
+import { PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { useDialogStore } from "~/app/(feed)/feed/dialogStore";
+import { SidebarCategories } from "~/app/(feed)/feed/SidebarCategories";
+import { SidebarFeeds } from "~/app/(feed)/feed/SidebarFeeds";
+import { UserManagementNavItem } from "~/app/(feed)/feed/UserManagementButton";
+import { LeftSidebarBottomNav } from "~/components/LeftSidebarBottomNav";
+import { LeftSidebarMain } from "~/components/LeftSidebarMain";
+import {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarHeader,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ useSidebar,
+} from "~/components/ui/sidebar";
+import { ButtonWithShortcut } from "./ButtonWithShortcut";
+import { SerialLogo } from "./SerialLogo";
+
+export function AppLeftSidebar() {
+ const { toggleSidebar, isMobile } = useSidebar();
+
+ const onNavigate = () => {
+ if (isMobile) {
+ toggleSidebar("left");
+ }
+ };
+
+ return (
+
+ {children}
+
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+ return (
+
+ );
+}
+
+function SidebarInput({
+ className,
+ ...props
+}: React.ComponentProps
+
+
+ {children}
+
+
+ {showIcon && (
+
+ );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+