From 3c586ddc999aa3dfffccdc48e9fac1ce794cbd76 Mon Sep 17 00:00:00 2001 From: Bob Burningham Date: Fri, 20 Oct 2023 22:44:03 -0700 Subject: [PATCH] added mobile mode button and sidebar --- .../[serverId]/channels/[channelId]/page.tsx | 45 +++++- components/chat/chat-header.tsx | 29 ++++ components/mobile-toggle.tsx | 32 ++++ components/ui/sheet.tsx | 146 ++++++++++++++++++ 4 files changed, 249 insertions(+), 3 deletions(-) create mode 100644 components/chat/chat-header.tsx create mode 100644 components/mobile-toggle.tsx create mode 100644 components/ui/sheet.tsx diff --git a/app/(main)/(routes)/servers/[serverId]/channels/[channelId]/page.tsx b/app/(main)/(routes)/servers/[serverId]/channels/[channelId]/page.tsx index 4d31c31..0714e39 100644 --- a/app/(main)/(routes)/servers/[serverId]/channels/[channelId]/page.tsx +++ b/app/(main)/(routes)/servers/[serverId]/channels/[channelId]/page.tsx @@ -1,7 +1,46 @@ -const ChannelIdPage = () => { +import { currentProfile } from "@/lib/current-profile"; +import { redirectToSignIn } from "@clerk/nextjs"; +import { db } from "@/lib/db"; +import { redirect } from "next/navigation"; +import { ChatHeader } from "@/components/chat/chat-header"; + +interface ChannelIdPageProps { + params: { + serverId: string; + channelId: string; + }; +} + +const ChannelIdPage = async ({ + params +}: ChannelIdPageProps) => { + + const profile = await currentProfile(); + + if (!profile) { + return redirectToSignIn(); + } + + const channel = await db.channel.findUnique({ + where: { + id: params.channelId, + }, + }); + + const member = await db.member.findFirst({ + where: { + serverId: params.serverId, + profileId: profile.id, + }, + }); + + if (!channel || !member) { + redirect(`/`); + } + return ( -
- Channel ID Page! +
+
) } diff --git a/components/chat/chat-header.tsx b/components/chat/chat-header.tsx new file mode 100644 index 0000000..abd9944 --- /dev/null +++ b/components/chat/chat-header.tsx @@ -0,0 +1,29 @@ +import { Hash, Menu } from "lucide-react" +import { MobileToggle } from "@/components/mobile-toggle"; + +interface ChatHeaderProps { + serverId: string; + name: string; + type: "channel" | "conversation"; + imageUrl?: string; +} + + +export const ChatHeader = ({ + serverId, + name, + type, + imageUrl +}: ChatHeaderProps) => { + return ( +
+ + {type === "channel" && ( + + )} +

+ {name} +

+
+ ) +} \ No newline at end of file diff --git a/components/mobile-toggle.tsx b/components/mobile-toggle.tsx new file mode 100644 index 0000000..2c5c30d --- /dev/null +++ b/components/mobile-toggle.tsx @@ -0,0 +1,32 @@ +import { Menu } from "lucide-react" + +import { + Sheet, + SheetContent, + SheetTrigger +} from "@/components/ui/sheet"; +import { Button } from "./ui/button"; +import { NavigationSidebar } from "@/components/navigation/navigation-sidebar"; +import { ServerSidebar } from "@/components/server/server-sidebar"; + +export const MobileToggle = ({ + serverId +}: { + serverId: string; +}) => { + return ( + + + + + +
+ +
+ + + + ) +} \ No newline at end of file diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx new file mode 100644 index 0000000..3e98e6f --- /dev/null +++ b/components/ui/sheet.tsx @@ -0,0 +1,146 @@ +"use client" + +import * as React from "react" +import * as SheetPrimitive from "@radix-ui/react-dialog" +import { cva, type VariantProps } from "class-variance-authority" +import { X } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Sheet = SheetPrimitive.Root + +const SheetTrigger = SheetPrimitive.Trigger + +const SheetClose = SheetPrimitive.Close + +const SheetPortal = ({ + className, + ...props +}: SheetPrimitive.DialogPortalProps) => ( + +) +SheetPortal.displayName = SheetPrimitive.Portal.displayName + +const SheetOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetOverlay.displayName = SheetPrimitive.Overlay.displayName + +const sheetVariants = cva( + "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", + { + variants: { + side: { + top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", + bottom: + "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", + left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", + right: + "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", + }, + }, + defaultVariants: { + side: "right", + }, + } +) + +interface SheetContentProps + extends React.ComponentPropsWithoutRef, + VariantProps {} + +const SheetContent = React.forwardRef< + React.ElementRef, + SheetContentProps +>(({ side = "right", className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)) +SheetContent.displayName = SheetPrimitive.Content.displayName + +const SheetHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +SheetHeader.displayName = "SheetHeader" + +const SheetFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +SheetFooter.displayName = "SheetFooter" + +const SheetTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetTitle.displayName = SheetPrimitive.Title.displayName + +const SheetDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetDescription.displayName = SheetPrimitive.Description.displayName + +export { + Sheet, + SheetPortal, + SheetOverlay, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +}