feat: complete non auth screens

components/layout/Sidebar.tsx

@@ -1,10 +1,13 @@
+import { useMemo } from 'react';
 import { BsHouseFill, BsBellFill, BsEnvelopeFill } from 'react-icons/bs';
 import { FaHashtag, FaUser } from 'react-icons/fa';
 
 import SidebarItem from './SidebarItem';
 import SidebarLogo from './SidebarLogo';
 import SidebarTweetButton from './SidebarTweetButton';
 
+const isLoggedIn = false;
+
 const items = [
   {
     icon: BsHouseFill,
@@ -20,34 +23,43 @@ const items = [
     icon: BsBellFill,
     label: 'Notifications',
     href: '/notifications',
-  },
-  {
-    icon: BsEnvelopeFill,
-    label: 'Messages',
-    href: '/messages',
+    auth: true,
   },
   {
     icon: FaUser,
     label: 'Profile',
     href: '/profiles/123',
+    auth: true,
   },
 ]
 
 const Sidebar = () => {
+  const filteredItems = useMemo(() => {
+    return items.filter((item) => {
+      if (!isLoggedIn && item.auth) {
+        return null;
+      }
+
+      return item;
+    })
+  }, []);
+
   return (
     <div className="col-span-1 h-full pr-4 md:pr-6">
         <div className="flex flex-col items-end">
           <div className="space-y-2 lg:w-[230px]">
             <SidebarLogo />
-            {items.map((item) => (
+            {filteredItems.map((item) => (
               <SidebarItem 
                 key={item.href} 
                 href={item.href} 
                 icon={item.icon} 
                 label={item.label}
               />
             ))}
-            <SidebarTweetButton />
+            {isLoggedIn && (
+              <SidebarTweetButton />
+            )}
           </div>
         </div>
       </div>

components/profiles/ProfileBio.tsx

@@ -1,12 +1,23 @@
 import { BiCalendar } from "react-icons/bi";
 
 import Button from "../Button";
+import LoginModal from "../modals/LoginModal";
+import RegisterModal from "../modals/RegisterModal";
+
+const isLoggedIn = false;
 
 const ProfileBio = () => {
   return ( 
     <div className="border-b-[1px] border-neutral-800 pb-4">
       <div className="flex justify-end p-2">
+        {isLoggedIn ? (
         <Button onClick={() => {}} secondary label="Follow" />
+        ) : (
+          <div className="flex flex-row items-center gap-2">
+            <LoginModal />
+            <RegisterModal />
+          </div>
+        )}
       </div>
       <div className="mt-8 px-4">
         <div className="flex flex-col">