Add logout confirmation dialog to prevent accidental logout

client/src/App.tsx

@@ -4,6 +4,7 @@ import { AppUnProtectedRoutes } from './app/routes';
 import { AppProtectedRoutes } from './app/routes/auth-routes';
 import useScrollbar from './shared/components/atoms/scrollbar';
 import { useAuth } from './shared/hooks/use-auth';
+import Footer from './components/Footer';
 
 const App = memo(() => {
   const { GlobalScrollbar } = useScrollbar();
@@ -19,6 +20,7 @@ const App = memo(() => {
       <>
         <GlobalScrollbar />
         <AppUnProtectedRoutes />
+        <Footer />
       </>
     );
   }
@@ -27,6 +29,7 @@ const App = memo(() => {
     <>
       <GlobalScrollbar />
       <AppProtectedRoutes />
+      <Footer />
     </>
   );
 });

client/src/components/Footer.css

@@ -0,0 +1,88 @@
+.footer {
+  width: 100%;
+  margin-top: 72px;
+  background-color: #e5e7eb; /* darker neutral grey */
+  border-top: 1px solid #d1d5db;
+  color: #374151;
+  font-size: 14px;
+}
+
+.footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 36px 28px 28px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  row-gap: 24px;
+}
+
+/* Left */
+.footer-copy {
+  font-weight: 600;
+  color: #111827;
+}
+
+/* Center links */
+.footer-links {
+  list-style: none;
+  display: flex;
+  gap: 22px;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+}
+
+.footer-links a {
+  color: #374151;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.footer-links a:hover {
+  color: #000000;
+  text-decoration: underline;
+}
+
+/* Right socials */
+.footer-socials {
+  display: flex;
+  gap: 18px;
+  justify-content: flex-end;
+}
+
+.footer-socials a {
+  color: #4b5563;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.footer-socials a:hover {
+  color: #000000;
+}
+
+/* Bottom credit */
+.footer-credit {
+  grid-column: 1 / -1;
+  text-align: center;
+  margin-top: 8px;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .footer-container {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+
+  .footer-links {
+    flex-wrap: wrap;
+    gap: 14px;
+  }
+
+  .footer-socials {
+    justify-content: center;
+  }
+}

client/src/components/Footer.tsx

@@ -0,0 +1,56 @@
+import "./Footer.css";
+
+export default function Footer() {
+  return (
+    <footer className="footer">
+      <div className="footer-container">
+        <p className="footer-copy">
+          © {new Date().getFullYear()} Code A2Z
+        </p>
+
+        <ul className="footer-links">
+          <li><a href="/about">About</a></li>
+          <li><a href="/blog">Blog</a></li>
+          <li>
+            <a
+              href="https://github.com/Code-A2Z"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitHub
+            </a>
+          </li>
+          <li><a href="/contact">Contact</a></li>
+        </ul>
+
+        <div className="footer-socials">
+          <a
+            href="https://github.com/Code-A2Z"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub
+          </a>
+          <a
+            href="https://www.linkedin.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            LinkedIn
+          </a>
+          <a
+            href="https://x.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            X
+          </a>
+        </div>
+
+        <p className="footer-credit">
+          Built with ❤️ by Code A2Z
+        </p>
+      </div>
+    </footer>
+  );
+}

client/src/shared/components/organisms/sidebar/hooks/index.ts

@@ -12,7 +12,6 @@ import {
 } from '../../../../../app/routes/constants/routes';
 import { useAuth } from '../../../../hooks/use-auth';
 
-
 const logoutStyle = {
   marginTop: 'auto',
   marginBottom: 0,
@@ -22,6 +21,15 @@ const useSidebar = () => {
   const [showExpandedView, setShowExpandedView] = useState(false);
   const { logout } = useAuth();
 
+  const handleLogout = useCallback(() => {
+    const confirmed = window.confirm(
+      'Are you sure you want to logout?'
+    );
+
+    if (confirmed) {
+      logout();
+    }
+  }, [logout]);
 
   const handleMouseHoverIn = useCallback(() => {
     setShowExpandedView(true);
@@ -31,7 +39,6 @@ const useSidebar = () => {
     setShowExpandedView(false);
   }, []);
 
-
   const sidebarItems = useMemo(() => {
     const items: SideBarItemsType[] = [
       {
@@ -68,21 +75,21 @@ const useSidebar = () => {
         screenName: ROUTES_PAGE_V1.SETTINGS,
       },
     ];
-    
+
     const secondaryItems: SideBarItemsType[] = [
       {
         icon: PowerSettingsNewIcon,
-        onClick: logout, 
+        onClick: handleLogout,
         title: 'Logout',
         style: logoutStyle,
       },
     ];
+
     return {
       items: items.filter(({ disable }) => !disable),
       secondaryItems: secondaryItems.filter(({ disable }) => !disable),
     };
-  }, [logout]);
-
+  }, [handleLogout]);
 
   return {
     showExpandedView,
@@ -91,4 +98,5 @@ const useSidebar = () => {
     sidebarItems,
   };
 };
+
 export default useSidebar;