fixed build errors, again

src/components/channels/channelList.tsx

@@ -3,7 +3,6 @@ import { ChannelListItem } from '@components/channels/channelListItem';
 import { DEFAULT_CHANNELS } from '@stores/constants';
 
 import { Plus } from 'iconoir-react';
-import Link from 'next/link';
 import { useState } from 'react';
 
 export default function ChannelList() {
@@ -14,9 +13,8 @@ export default function ChannelList() {
       {list.map((item) => (
         <ChannelListItem key={item.event_id} data={item} />
       ))}
-      <Link
-        prefetch={false}
-        href="/nostr/create-channel"
+      <a
+        href="/create-channel"
         className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
       >
         <div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
@@ -25,7 +23,7 @@ export default function ChannelList() {
         <div>
           <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new channel</h5>
         </div>
-      </Link>
+      </a>
     </div>
   );
 }

src/components/layouts/newsfeed.tsx

@@ -1,5 +1,6 @@
 import AppHeader from '@components/appHeader';
 import MultiAccounts from '@components/multiAccounts';
+import Navigation from '@components/navigation';
 
 export default function NewsfeedLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -15,7 +16,22 @@ export default function NewsfeedLayout({ children }: { children: React.ReactNode
           <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
             <MultiAccounts />
           </div>
-          {children}
+          <div className="grid w-full grid-cols-4 xl:grid-cols-5">
+            <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
+              <Navigation />
+            </div>
+            <div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
+              <div className="h-full w-full rounded-lg">{children}</div>
+            </div>
+            <div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
+              <div className="flex h-full w-full items-center justify-center">
+                <p className="select-text p-8 text-center text-zinc-400">
+                  This feature hasn&apos;t implemented yet, so resize Lume to the initial size for a better experience.
+                  I&apos;m sorry for this inconvenience, and I swear I will add it soon 😁
+                </p>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/components/relaysProvider.tsx

@@ -8,6 +8,12 @@ export const RelayContext = createContext({});
 const relays = DEFAULT_RELAYS;
 
 export default function RelayProvider({ children }: { children: React.ReactNode }) {
-  const pool = useMemo(() => new RelayPool(relays, { useEventCache: false, logSubscriptions: false }), []);
+  const pool = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      return new RelayPool(relays, { useEventCache: false, logSubscriptions: false });
+    } else {
+      return null;
+    }
+  }, []);
   return <RelayContext.Provider value={[pool, relays]}>{children}</RelayContext.Provider>;
 }