client: modify nav links, search page ui

client/src/ProtectedRoute.tsx

@@ -16,5 +16,5 @@ export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
         return <Navigate to='/auth' replace />
     }
 
-    return <>{children}</>
+    return children
 }

client/src/components/card/closed-debate-card.css

@@ -30,6 +30,7 @@
 }
 
 #closed-card .left h2 {
+    width: fit-content;
     font-size: 22px;
     font-weight: 600;
     overflow: hidden;

client/src/components/card/open-debate-card.css

@@ -1,4 +1,5 @@
 #open-card h2 {
+    width: fit-content;
     font-size: 22px;
     font-weight: 600;
     overflow: hidden;

client/src/components/sidebar/explore.tsx

@@ -2,7 +2,7 @@ import './explore.css'
 import { useRef, useState } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import { IoSearch } from 'react-icons/io5'
-import { categoriesData } from '../../data/categories-data'
+import { categoriesData } from '../../data/categories'
 
 interface ExploreProps {
     term?: string

client/src/components/sidebar/left-sidebar.css

@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-between;
 }
 
 #left-sidebar.open {
@@ -44,6 +43,10 @@
     overflow-y: auto;
 }
 
+#left-sidebar ul li:nth-child(3) {
+    display: none;
+}
+
 #left-sidebar .links__wrapper {
     width: fit-content;
     display: flex;
@@ -198,6 +201,14 @@
         justify-content: center;
     }
 
+    #left-sidebar ul li:nth-child(3) {
+        display: flex;
+    }
+
+    #left-sidebar ul li:last-child {
+        display: none;
+    }
+
     #left-sidebar .links__wrapper p {
         display: none;
     }

client/src/components/sidebar/left-sidebar.tsx

@@ -3,7 +3,7 @@ import { useLocation, Link, useNavigate } from 'react-router-dom'
 import { toast } from 'sonner'
 import { AuthStatus, AuthTab, useAuthStore } from '../../store/useAuthStore'
 import { useNavStore } from '../../store/useNavStore'
-import { leftSidebarLinks } from '../../data/left-sidebar-links'
+import { navLinks } from '../../data/nav-links'
 import Profile from './profile'
 import { GoPerson } from 'react-icons/go'
 import LoadingSkeleton from '../loading/skeleton'
@@ -37,7 +37,7 @@ const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
         <img src='/logo.png' alt='' />
       </Link>
       <ul>
-        {leftSidebarLinks.map(item => (
+        {navLinks.map(item => (
           <li key={item.id} title={item.name} className={location.pathname === item.href ? 'active' : ''}>
             <div onClick={() => handleLinkClick(item.href, item.name)} className='links__wrapper'>
               <item.icon />

client/src/data/left-sidebar-links.ts → client/src/data/nav-links.ts

@@ -2,9 +2,8 @@ import { RiHome2Fill, RiFireFill } from 'react-icons/ri'
 import { FaFeather } from 'react-icons/fa6'
 import { IoSearch } from 'react-icons/io5'
 import { IoMdCreate } from 'react-icons/io'
-// import { PiBellSimpleFill } from 'react-icons/pi'
 
-export const leftSidebarLinks = [
+export const navLinks = [
     {
         id: 1,
         name: 'Home',
@@ -35,10 +34,10 @@ export const leftSidebarLinks = [
         href: '/open-topics',
         icon: FaFeather
     },
-    // {
-    //     id: 6,
-    //     name: 'Notifications',
-    //     href: '/notifications',
-    //     icon: PiBellSimpleFill
-    // }
+    {
+        id: 6,
+        name: 'Create Debate',
+        href: '/create',
+        icon: IoMdCreate
+    }
 ]

client/src/pages/search/index.tsx

@@ -1,6 +1,7 @@
 import './style.css'
 import { useState, useEffect } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { useNavStore } from '../../store/useNavStore'
 import Explore from '../../components/sidebar/explore'
 import { IoMdClose } from 'react-icons/io'
 import { PiArrowBendUpRightBold } from 'react-icons/pi'
@@ -9,6 +10,8 @@ export default function SearchPage() {
     const location = useLocation()
     const navigate = useNavigate()
 
+    const { sidebar } = useNavStore()
+
     const [searchTerm, setSearchTerm] = useState('')
 
     useEffect(() => {
@@ -25,7 +28,9 @@ export default function SearchPage() {
 
     return (
         <div id='search'>
-            <Explore term={searchTerm} />
+            <div className={`explore__container ${sidebar ? 'visible' : 'hidden'}`}>
+                <Explore term={searchTerm} />
+            </div>
 
             {searchTerm ? (
                 <>
@@ -40,7 +45,7 @@ export default function SearchPage() {
                     <p>No debates found</p>
                 </>
             ) : (
-                <div className='search-here'>
+                <div className={`search-here ${sidebar ? 'hidden' : ''}`}>
                     <PiArrowBendUpRightBold size={50} />
                     <h2>Search here</h2>
                 </div>