Added memo for the children of Sidebar. Changed box-shadow, backgroun…

…d of PageTitleWrapper. Also cancelled cache wrapping for getPropertyDevelopers to get fresh list each time user needs it. Also re-activated redirecting to the Home page when clicked on Sidebar logo.

Related ongoing next.js bug of multiple css module files for the Sidebar(client component) rendered inside layout(server component)
- @ref-link: vercel/next.js#25456

client/app/api/(users)/property-developers/list.ts

@@ -1,11 +1,11 @@
-import { cache } from 'react'
+// import { cache } from 'react'
 import { buildServerSender } from '@/api/(axios)/server/build-server-sender'
 import { TPropertyDevelopersList } from '@/types/types'
 import AuthRequiredError from '@/lib/errors/AuthRequiredError'
 import { permanentRedirect, redirect, useRouter } from 'next/navigation'
 import { ERoute } from '@/app/types/enums'
 
-const getPropertyDevelopers = cache(async () => {
+const getPropertyDevelopers = async () => {
   const axiosSender = buildServerSender()
 
   try {
@@ -33,6 +33,6 @@ const getPropertyDevelopers = cache(async () => {
     )
     throw error
   }
-})
+}
 
 export default getPropertyDevelopers

client/app/components/(Layout)/(dashboard)/Body/Main/Title/PageTitleWrapper.module.css

@@ -9,9 +9,11 @@
   --single-hue-8: #f7f8f9;
   --single-hue-9: #fcfcfd;
 
+  flex: 0 1 auto;
+
   display: flex;
   align-items: center;
-  padding: 12px 16px 11px 64px;
+  padding: 0.75em 1em 0.6875em 4em;
   /* z-index: 4; */
   /* background-color: #fff; */
   /* Fibonacci numbers */
@@ -28,12 +30,15 @@
     var(--single-hue-9) calc(80%)
   );
   /* background-blend-mode: color; */
-  border-bottom: 1px solid #e8e8e8;
+  /* border-bottom: 1px solid #e8e8e8; */
+  /* box-shadow: 0px 0px 8px 0px var(--text-primary); */
+  box-shadow: 0px 0px 13px 3px var(--text-primary);
+  /* border-bottom-right-radius: 50px 20px; */
   width: 100%;
 }
 
 @media (min-width: 40rem) {
   .wrapper {
-    padding: 16px 24px;
+    padding: 1em 1.5em;
   }
 }

client/app/components/(Layout)/(dashboard)/Sidebar/Bottom.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useTransition } from 'react'
+import { memo, useState, useTransition } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 
@@ -39,4 +39,4 @@ const Bottom = () => {
   )
 }
 
-export default Bottom
+export default memo(Bottom)

client/app/components/(Layout)/(dashboard)/Sidebar/Copyright.tsx

@@ -1,13 +1,12 @@
+import { memo } from 'react'
 import classes from './Copyright.module.css'
 
 const Copyright = () => {
   return (
     <footer className={classes.footer}>
-      <p className={classes['copyright-text']}>
-        &copy;2024 Nagua
-      </p>
+      <p className={classes['copyright-text']}>&copy;2024 Nagua</p>
     </footer>
   )
 }
 
-export default Copyright
+export default memo(Copyright)

client/app/components/(Layout)/(dashboard)/Sidebar/HamburgerWrapper.module.css

@@ -4,7 +4,8 @@
   display: flex;
   position: absolute;
   left: 16px;
-  top: 12px;
+  /* top: 12px; */
+  top: 20px;
 }
 
 @media (min-width: 40rem) {

client/app/components/(Layout)/(dashboard)/Sidebar/Header.tsx

@@ -1,3 +1,6 @@
+'use client'
+
+import { memo } from 'react'
 import { useRouter } from 'next/navigation'
 import Image from 'next/image'
 
@@ -26,7 +29,7 @@ const Header = (props: THeaderProps) => {
           //   sizes="(max-width: 768px) 100vw"
           alt="logo"
           style={{ cursor: 'pointer' }}
-          //   onClick={() => router.push(ERoute.Home)}
+          onClick={() => router.push(ERoute.Home)}
         />
       </div>
       <button className={classes['dashboard-closer']} onClick={props.onClose}>
@@ -36,4 +39,4 @@ const Header = (props: THeaderProps) => {
   )
 }
 
-export default Header
+export default memo(Header)

client/app/components/(Layout)/(dashboard)/Sidebar/NavigationMenu.tsx

@@ -1,7 +1,12 @@
+'use client'
+import { memo } from 'react'
+
+import { usePathname } from 'next/navigation'
 import Link from 'next/link'
+
 import classes from './NavigationMenu.module.css'
+
 import { ERoute } from '@/app/types/enums'
-import { usePathname } from 'next/navigation'
 
 const NavigationMenu = () => {
   const pathname = usePathname()
@@ -61,4 +66,4 @@ const NavigationMenu = () => {
   )
 }
 
-export default NavigationMenu
+export default memo(NavigationMenu)

client/app/components/(Layout)/(dashboard)/Sidebar/SidebarContainer.module.css

@@ -1,5 +1,5 @@
 .sidebar-container {
-  z-index: 0;
+  z-index: 1;
   /* font-size: 1.25em; */
   font-size: 1em;
 
@@ -21,7 +21,7 @@
 
   /* Animation & Transition */
   transform: translate(-100%);
-  opacity: 0.1;
+  opacity: 0.5;
   transition: transform ease-in-out, z-index ease-in-out, opacity ease-in-out;
   transition-duration: calc(var(--global-transition-duration));
 }
@@ -35,7 +35,7 @@
 @media (min-width: 40rem) {
   .sidebar-container,
   .collapsed {
-    z-index: 0;
+    /* z-index: 0; */
     width: var(--sidebar-width-larger-screens);
     font-size: 0.875em;
     flex: 0 0 auto;

client/app/components/(Layout)/(dashboard)/Sidebar/SidebarContainer.tsx

@@ -41,6 +41,8 @@ const SidebarContainer = (props: TSidebarContainerProps) => {
     sidebarCollapsed ? ` ${classes.collapsed}` : ''
   }`
 
+  console.log('sidebar rendered with: ', sidebarContainerClasses)
+
   return (
     <>
       <HamburgerWrapper onClick={openSidebarHandler} />