Offline-Bridge · benedictfred · Jan 23, 2026
diff --git a/app/(app)/dashboard/page.tsx b/app/(app)/dashboard/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import BalanceOverview from "@/app/components/dashboard/BalanceOverview";
 import CopyUssd from "@/app/components/dashboard/CopyUssd";
 import Metrics from "@/app/components/dashboard/Metrics";

diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import Sidebar from "../Components/common/Sidebar";
-import AppNav from "../Components/common/AppNav";
-import SendMoneyModal from "../Components/dashboard/SendMoneyModal";
-
+import Sidebar from "../components/common/Sidebar";
+import AppNav from "../components/common/AppNav";
+import SendMoneyModal from "../components/dashboard/SendMoneyModal";
+import { usePathname } from "next/navigation";
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
+  const pathname = usePathname();
 
   return (
     <main className="font-sfPro bg-[#0A0A0F] flex h-screen xl:overflow-hidden relative ">
@@ -22,13 +23,14 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
         <div className="flex-1 overflow-y-auto px-6 py-5">{children}</div>
       </div>
 
+      {pathname === "/send-money" && <SendMoneyModal />}
+
       {isMobileSidebarOpen && (
         <div
           className="xl:hidden fixed inset-0 bg-black/40 z-10"
           onClick={() => setIsMobileSidebarOpen(false)}
         />
       )}
-      <SendMoneyModal/>
     </main>
   );
 }
diff --git a/app/(app)/send-money/page.tsx b/app/(app)/send-money/page.tsx
@@ -0,0 +1,3 @@
+export default function SendMoneyPage() {
+  return null;
+}
diff --git a/app/(public)/layout.tsx b/app/(public)/layout.tsx
@@ -1,4 +1,4 @@
-
+import Navbar from "../components/common/Navbar";
 
 export default function PublicPagesLayout({
   children,
@@ -7,6 +7,7 @@ export default function PublicPagesLayout({
 }) {
   return (
     <>
+      <Navbar />
       {children}
     </>
   );

diff --git a/app/(public)/page.tsx b/app/(public)/page.tsx
@@ -1,10 +1,9 @@
-import Footer from "../Components/common/Footer";
-import Hero from "../Components/homepage/Hero";
-import Limitations from "../Components/homepage/Limitations";
-import Ready from "../Components/homepage/Ready";
-import Solution from "../Components/homepage/Solution";
-import Steps from "../Components/homepage/Steps";
-
+import Footer from "../components/common/Footer";
+import Hero from "../components/homepage/Hero";
+import Limitations from "../components/homepage/Limitations";
+import Ready from "../components/homepage/Ready";
+import Solution from "../components/homepage/Solution";
+import Steps from "../components/homepage/Steps";
 
 export default function Home() {
   return (

diff --git a/app/components/common/Sidebar.tsx b/app/components/common/Sidebar.tsx
@@ -14,11 +14,13 @@ import {
   X,
 } from "lucide-react";
 import Image from "next/image";
-import { cn } from "@/lib/utils";
+import { cn, shallowNavigate } from "@/lib/utils";
+import { usePathname } from "next/navigation";
 
 interface NavItem {
   label: string;
   href: string;
+  isModal?: boolean;
   icon: LucideIcon;
 }
 
@@ -42,6 +44,7 @@ const navItems: NavItem[] = [
     label: "Send Money",
     href: "/send-money",
     icon: Send,
+    isModal: true,
   },
   {
     label: "Receive Money",
@@ -65,6 +68,7 @@ export default function Sidebar({
   onCloseMobileSidebar,
 }: SidebarProps) {
   const [isCollapsed, setIsCollapsed] = useState(false);
+  const pathname = usePathname();
 
   return (
     <aside
@@ -129,21 +133,65 @@ export default function Sidebar({
         )}
 
         <nav className="flex-1 p-3 space-y-1">
-          {navItems.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className="flex items-center gap-3 px-3 py-3 rounded-lg text-gray-400 hover:bg-gray-800/50 hover:text-white transition-all group"
-              title={isCollapsed ? item.label : undefined}
-            >
-              <span className="shrink-0">
-                <item.icon className="w-5 h-5" />
-              </span>
-              {!isCollapsed && (
-                <span className="text-sm font-medium">{item.label}</span>
-              )}
-            </Link>
-          ))}
+          {navItems.map((item) => {
+            const isActive = pathname === item.href;
+            return (
+              <div
+                key={item.href}
+                className={cn(
+                  "relative rounded-xl transition-all",
+                  isActive
+                    ? "p-px bg-linear-to-r from-white/30 via-white/50 to-white/30"
+                    : "",
+                )}
+                style={
+                  isActive
+                    ? {
+                        filter: "drop-shadow(0 0 6px rgba(255, 255, 255, 0.2))",
+                      }
+                    : undefined
+                }
+              >
+                {item.isModal ? (
+                  <button
+                    className={cn(
+                      "flex items-center gap-3 px-3 py-3 rounded-xl transition-all group relative w-full cursor-pointer",
+                      isActive
+                        ? "text-white bg-[#0F1018]"
+                        : "text-gray-400 bg-transparent hover:bg-gray-800/50 hover:text-white",
+                    )}
+                    title={isCollapsed ? item.label : undefined}
+                    onClick={() => shallowNavigate(item.href)}
+                  >
+                    <span className="shrink-0">
+                      <item.icon className="w-5 h-5" />
+                    </span>
+                    {!isCollapsed && (
+                      <span className="text-sm font-medium">{item.label}</span>
+                    )}
+                  </button>
+                ) : (
+                  <Link
+                    href={item.href}
+                    className={cn(
+                      "flex items-center gap-3 px-3 py-3 rounded-xl transition-all group relative",
+                      isActive
+                        ? "text-white bg-[#0F1018]"
+                        : "text-gray-400 bg-transparent hover:bg-gray-800/50 hover:text-white",
+                    )}
+                    title={isCollapsed ? item.label : undefined}
+                  >
+                    <span className="shrink-0">
+                      <item.icon className="w-5 h-5" />
+                    </span>
+                    {!isCollapsed && (
+                      <span className="text-sm font-medium">{item.label}</span>
+                    )}
+                  </Link>
+                )}
+              </div>
+            );
+          })}
         </nav>
       </div>
     </aside>

diff --git a/app/components/dashboard/CopyUssd.tsx b/app/components/dashboard/CopyUssd.tsx
@@ -24,7 +24,7 @@ export default function CopyUssd() {
     <div className="bg-linear-to-br from-[#1D293D1A] from-15% via-[#0F1018] via-10% to-[#155DFC1A] to-50% rounded-2xl p-6 md:p-8 border border-[#1D293D33]">
       <div className="bg-[#0a0a0f]/50 backdrop-blur-sm border border-gray-800 rounded-xl p-6 mb-8 flex items-center justify-between">
         <div>
-          <h3 className="bg-linear-to-b from-[#155DFC] to-[#827AF2] bg-clip-text text-transparent text-4xl md:text-5xl font-bold mb-2">
+          <h3 className="bg-linear-to-b from-[#155DFC] to-[#827AF2] bg-clip-text text-transparent text-xl md:text-2xl font-bold mb-2">
             {ussdCode}
           </h3>
           <p className="text-gray-400 text-lg">USSD Code</p>