Sidebar fix

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)}