Sidebar fix

src/app/chat/page.tsx

@@ -6,7 +6,6 @@ import AppSidebar from "@/components/Sidebar";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import { useIsMobile } from "@/hooks/is-mobile";
 import useApp from "@/hooks/use-app";
 import { ProfileSettings } from "@/types/settings";
 import { Server } from "@/types/types";
@@ -23,7 +22,6 @@ import Link from "next/link";
 
 export default function ChatHub() {
   const app = useApp();
-  const isMobile = useIsMobile();
 
   const recentDMs = app.dms?.slice(0, 5) || [];
   // const activeServers = app.servers?.slice(0, 5) || [];
@@ -31,7 +29,7 @@ export default function ChatHub() {
 
   return (
     <AppSidebar app={app}>
-      <div className="flex-1 p-6 overflow-y-auto">
+      <div className="h-svh w-full max-h-svh flex flex-col py-5 px-5 gap-5">
         <motion.div
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
@@ -39,7 +37,7 @@ export default function ChatHub() {
           className="space-y-8"
         >
           {/* Greeting */}
-          <div onClick={() => isMobile && app.setSidebarOpen(true)}>
+          <div onClick={() => app.setSidebarOpen(true)}>
             <h1 className="text-3xl font-bold flex cursor-pointer gap-2">
               <ChevronLeft className="my-auto w-5" />
               Hey {app.profile?.display_name || "there"}

src/components/MessageBox.tsx

@@ -11,15 +11,13 @@ import {
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
 import { ChevronLeftIcon, SendIcon, SmilePlusIcon } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { format, isToday, isYesterday } from "date-fns";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { UserProfile } from "@/hooks/get-user";
-import axios from "axios";
 import ProfilePicture from "./ProfilePicture";
 import App from "@/types/app";
-import { useIsMobile } from "@/hooks/use-mobile";
 import { Textarea } from "./ui/textarea";
 
 function MessageContainer({ message, app }: { message: Message; app: App }) {
@@ -130,7 +128,6 @@ export default function MessageBox({
   messages: Message[];
 }) {
   const [text, setText] = useState("");
-  const isMobile = useIsMobile();
   const inputRef = useRef<any>(null);
 
   return (
@@ -138,7 +135,7 @@ export default function MessageBox({
       {channelName && (
         <header className="h-12 py-4 flex items-center border-b text-sm font-semibold">
           <span
-            onClick={() => isMobile && app.setSidebarOpen(true)}
+            onClick={() => app.setSidebarOpen(true)}
             className="cursor-pointer flex"
           >
             <ChevronLeftIcon className="w-5 h-5" />

src/components/Sidebar.tsx

@@ -36,6 +36,7 @@ import { cn } from "@/lib/utils";
 import App from "@/types/app";
 import { ProfileSettings } from "@/types/settings";
 import axios from "axios";
+import { useIsMobile } from "@/hooks/is-mobile";
 
 export default function AppSidebar({
   children,
@@ -54,6 +55,7 @@ export default function AppSidebar({
   const [newServer, setNewServer] = useState({ name: "", ip: "" });
   const [query, setQuery] = useState("");
   const router = useRouter();
+  const isMobile = useIsMobile();
 
   const dms = useMemo(() => {
     return Array.from(
@@ -138,7 +140,7 @@ export default function AppSidebar({
       <div
         className={cn(
           "border-r transition-all duration-300 ease-in-out overflow-hidden flex",
-          app.sidebarOpen ? "w-5xl md:w-md" : "w-0 md:w-md"
+          app.sidebarOpen && isMobile ? "w-5xl md:w-md" : "w-0 md:w-md"
         )}
       >
         <div className="w-16 flex flex-col items-center gap-4 py-4 bg-muted border-r">
@@ -302,7 +304,7 @@ export default function AppSidebar({
           </footer>
         </div>
       </div>
-      {app.sidebarOpen ? (
+      {app.sidebarOpen && isMobile ? (
         <div
           className="w-full h-full overflow-x-hidden"
           onClick={() => app.setSidebarOpen(false)}