From 05f62e98a2d7f6a9691aa403f9b84d03b89e2293 Mon Sep 17 00:00:00 2001
From: Shubham-Lal <im.shubhamlal@gmail.com>
Date: Thu, 8 Aug 2024 11:44:50 +0530
Subject: [PATCH] client: add notification page to protected route

---
 client/src/App.tsx                            |  2 +-
 .../src/components/sidebar/left-sidebar.css   | 13 ----------
 client/src/components/sidebar/profile.css     | 12 +++++++--
 client/src/components/sidebar/profile.tsx     | 26 +++++++++----------
 client/src/data/left-sidebar-links.ts         | 14 +++++-----
 5 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 8257a78..1d98dfe 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -63,7 +63,7 @@ export default function App() {
           <Route path='/create' element={<ProtectedRoute><CreateDebatePage isScrollingUp={isScrollingUp} isFullscreen={!sidebar} /></ProtectedRoute>} />
           <Route path='/hot-topics' element={<HotTopicsPage />} />
           <Route path='/open-topics' element={<OpenTopicsPage />} />
-          <Route path='/notifications' element={<NotificationPage />} />
+          <Route path='/notifications' element={<ProtectedRoute><NotificationPage /></ProtectedRoute>} />
           <Route path=':username' element={<UserProfile isScrollingUp={isScrollingUp} />} />
         </Routes>
       </main>
diff --git a/client/src/components/sidebar/left-sidebar.css b/client/src/components/sidebar/left-sidebar.css
index 166c3ee..a826cdc 100644
--- a/client/src/components/sidebar/left-sidebar.css
+++ b/client/src/components/sidebar/left-sidebar.css
@@ -62,10 +62,6 @@
     font-size: 22px;
 }
 
-#left-sidebar li:nth-child(2) {
-    display: none;
-}
-
 .underline {
     display: inline-block;
     position: relative;
@@ -140,11 +136,6 @@
         gap: 30px;
     }
 
-    #left-sidebar li:nth-child(2) {
-        display: inline-flex;
-        justify-content: center;
-    }
-
     #left-sidebar .profile__container {
         display: flex;
         flex-direction: column;
@@ -207,10 +198,6 @@
         justify-content: center;
     }
 
-    #left-sidebar li:nth-child(6) {
-        display: none;
-    }
-
     #left-sidebar .links__wrapper p {
         display: none;
     }
diff --git a/client/src/components/sidebar/profile.css b/client/src/components/sidebar/profile.css
index 5244b6a..9c8e716 100644
--- a/client/src/components/sidebar/profile.css
+++ b/client/src/components/sidebar/profile.css
@@ -58,13 +58,13 @@
     flex-shrink: 0;
 }
 
+.notification-btn,
 .profile__image,
 .modal-profile__image {
     background-color: var(--explore_input_bg);
 }
 
-.theme-btn,
-.notification-btn {
+.theme-btn {
     display: none;
     background-color: var(--explore_input_bg);
 }
@@ -167,6 +167,10 @@
 }
 
 @media screen and (max-width: 767px) {
+    .profile__wrapper {
+        flex-direction: column;
+    }
+
     .profile__wrapper .auth-btn {
         width: 40px;
         height: 40px;
@@ -198,6 +202,10 @@
 }
 
 @media screen and (max-width: 480px) {
+    .profile__wrapper {
+        flex-direction: row;
+    }
+
     .profile__modal {
         padding-top: 10px;
         padding-bottom: 15px;
diff --git a/client/src/components/sidebar/profile.tsx b/client/src/components/sidebar/profile.tsx
index 73dd860..2045614 100644
--- a/client/src/components/sidebar/profile.tsx
+++ b/client/src/components/sidebar/profile.tsx
@@ -59,22 +59,22 @@ const Profile: React.FC<ProfileProps> = ({ isVisible }) => {
 
     return (
         <div className='profile__wrapper'>
-            <Link
-                to='/notifications'
-                className='notification-btn'
-                style={{
-                    borderWidth: '2px',
-                    borderStyle: 'solid',
-                    borderColor: location.pathname === '/notifications' ? 'var(--body_color)' : 'transparent'
-                }}
-            >
-                <PiBellSimpleFill size={20} />
-            </Link>
             {isAuthenticated === AuthStatus.Authenticating ? (
                 <LoadingSkeleton style={{ width: '40px', height: '40px', borderRadius: '50%' }} />
             ) : isAuthenticated === AuthStatus.Authenticated ? (
                 <>
-                    <div
+                    <Link
+                        to='/notifications'
+                        className='notification-btn'
+                        style={{
+                            borderWidth: '2px',
+                            borderStyle: 'solid',
+                            borderColor: location.pathname === '/notifications' ? 'var(--body_color)' : 'transparent'
+                        }}
+                    >
+                        <PiBellSimpleFill size={20} />
+                    </Link>
+                    <button
                         className='profile__image'
                         style={{
                             borderWidth: '2px',
@@ -88,7 +88,7 @@ const Profile: React.FC<ProfileProps> = ({ isVisible }) => {
                         ) : (
                             <FaRegUser style={{ width: '50%', height: '50%' }} />
                         )}
-                    </div>
+                    </button>
                 </>
             ) : authTab === AuthTab.Closed && (
                 <>
diff --git a/client/src/data/left-sidebar-links.ts b/client/src/data/left-sidebar-links.ts
index 7fb0e2e..92d8737 100644
--- a/client/src/data/left-sidebar-links.ts
+++ b/client/src/data/left-sidebar-links.ts
@@ -1,8 +1,8 @@
 import { RiHome2Fill, RiFireFill } from 'react-icons/ri'
 import { FaFeather } from 'react-icons/fa6'
 import { IoSearch } from 'react-icons/io5'
-import { PiBellSimpleFill } from 'react-icons/pi'
 import { IoMdCreate } from 'react-icons/io'
+// import { PiBellSimpleFill } from 'react-icons/pi'
 
 export const leftSidebarLinks = [
     {
@@ -35,10 +35,10 @@ export const leftSidebarLinks = [
         href: '/open-topics',
         icon: FaFeather
     },
-    {
-        id: 6,
-        name: 'Notifications',
-        href: '/notifications',
-        icon: PiBellSimpleFill
-    }
+    // {
+    //     id: 6,
+    //     name: 'Notifications',
+    //     href: '/notifications',
+    //     icon: PiBellSimpleFill
+    // }
 ]
\ No newline at end of file