ATTUNE-HEART-THERAPY/website
6
0
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refactor SideNav component for improved styling and responsiveness. Adjust layout in Booking and Dashboard pages to match updated SideNav dimensions. Enhance Login page with gradient text and button styles for a more modern appearance.

Browse Source
This commit is contained in:
iamkiddy 2025-11-06 14:40:30 +00:00
parent af29ec2a48
commit 3c27026371
4 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/(admin)/_components/side-nav.tsx
View File

@ -63,21 +63,21 @@ export default function SideNav() {
{/* Side Navigation */}
<aside
className={`fixed top-0 left-0 z-50 h-screen bg-white border-r border-gray-200 flex flex-col transition-transform duration-200 w-[85vw] max-w-[250px] min-w-[200px] md:translate-x-0 md:w-[250px] md:min-w-[250px] md:max-w-[250px] ${
className={`fixed top-0 left-0 z-50 h-screen bg-white border-r border-gray-200 flex flex-col transition-transform duration-200 w-[85vw] max-w-[200px] min-w-[160px] md:translate-x-0 md:w-[200px] md:min-w-[200px] md:max-w-[200px] ${
open ? "translate-x-0" : "-translate-x-full"
} md:translate-x-0`}
>
{/* Logo Section */}
<div className="flex-shrink-0 px-4 pb-4 flex flex-col gap-1 md:block mb-5 pt-16 md:pt-4">
<div className="flex items-center gap-3 mb-1 ml-4 md:ml-6">
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-gradient-to-br from-rose-100 to-pink-100">
<Heart className="w-6 h-6 text-rose-600" fill="currentColor" />
<div className="flex-shrink-0 px-3 pb-4 flex flex-col gap-1 md:block mb-5 pt-16 md:pt-4">
<div className="flex items-center gap-2 mb-1 ml-2 md:ml-3">
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-gradient-to-br from-rose-100 to-pink-100">
<Heart className="w-5 h-5 text-rose-600" fill="currentColor" />
</div>
<span className="text-lg font-semibold text-gray-900">Attune Heart</span>
<span className="text-sm font-semibold text-gray-900">Attune Heart</span>
</div>
</div>
<hr className="flex-shrink-0 -mt-10 mb-4 mx-4 border-gray-200 md:block hidden" />
<hr className="flex-shrink-0 -mt-10 mb-4 mx-3 border-gray-200 md:block hidden" />
{/* Navigation Items */}
<nav className="flex-1 overflow-y-auto flex flex-col gap-2 px-2 md:px-0">
@ -89,31 +89,31 @@ export default function SideNav() {
<div className="relative flex items-center w-full" key={item.label}>
{isActive && (
<span
className="absolute left-0 top-0 h-[45px] w-[3px] bg-[#4A90A4]"
className="absolute left-0 top-0 h-[40px] w-[3px] bg-gradient-to-b from-rose-500 to-pink-600"
style={{ left: 0 }}
/>
)}
<Link
href={item.href}
onClick={() => setOpen(false)}
className={`group flex items-center gap-3 py-3 pl-4 md:pl-4 pr-4 md:pr-4 transition-colors duration-200 focus:outline-none w-[90%] md:w-[90%] ml-2 md:ml-4 cursor-pointer justify-start ${
className={`group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 focus:outline-none w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start ${
isActive
? "bg-[#4A90A4] text-white border border-[#4A90A4] rounded-[5px] shadow-sm"
: "bg-transparent text-gray-600 hover:bg-[#4A90A4]/10 hover:text-[#4A90A4] rounded-lg"
? "bg-gradient-to-r from-rose-500 to-pink-600 text-white border border-rose-500 rounded-[5px] shadow-sm"
: "bg-transparent text-gray-600 hover:bg-rose-50 hover:text-rose-600 rounded-lg"
}`}
style={isActive ? { height: 45 } : {}}
style={isActive ? { height: 40 } : {}}
>
<Icon
size={20}
size={18}
strokeWidth={isActive ? 2.2 : 1.5}
className={
isActive
? "text-white"
: "text-gray-700 group-hover:text-[#4A90A4]"
: "text-gray-700 group-hover:text-rose-600"
}
/>
<span
className="font-light leading-none text-[13px] md:text-[13px]"
className="font-light leading-none text-[12px] md:text-[12px]"
style={{ fontWeight: 300 }}
>
{item.label}
@ -128,10 +128,10 @@ export default function SideNav() {
<Link
href="/settings"
onClick={() => setOpen(false)}
className="group flex items-center gap-3 py-3 pl-4 md:pl-4 pr-4 md:pr-4 transition-colors duration-200 w-[90%] md:w-[90%] ml-2 md:ml-4 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
className="group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
>
<Settings size={20} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
<span className="font-light leading-none text-[13px]" style={{ fontWeight: 300 }}>
<Settings size={18} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
<span className="font-light leading-none text-[12px]" style={{ fontWeight: 300 }}>
Settings
</span>
</Link>
@ -140,10 +140,10 @@ export default function SideNav() {
setOpen(false);
// Handle logout
}}
className="group flex items-center gap-3 py-3 pl-4 md:pl-4 pr-4 md:pr-4 transition-colors duration-200 w-[90%] md:w-[90%] ml-2 md:ml-4 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
className="group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
>
<LogOut size={20} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
<span className="font-light leading-none text-[13px]" style={{ fontWeight: 300 }}>
<LogOut size={18} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
<span className="font-light leading-none text-[12px]" style={{ fontWeight: 300 }}>
Logout
</span>
</button>

2
app/(admin)/booking/page.tsx
View File

@ -8,7 +8,7 @@ export default function Booking() {
{/* Side Navigation */}
<SideNav />
<div className="md:ml-[250px]">
<div className="md:ml-[200px]">
<main className="p-4 sm:p-6 lg:p-8">
</main>
</div>

2
app/(admin)/dashboard/page.tsx
View File

@ -8,7 +8,7 @@ export default function Dashboard() {
{/* Side Navigation */}
<SideNav />
<div className="md:ml-[250px]">
<div className="md:ml-[200px]">
{/* Main Content */}
<main className="p-4 sm:p-6 lg:p-8">
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>

6
app/(auth)/login/page.tsx
View File

@ -51,7 +51,7 @@ export default function Login() {
</Button>
{/* Heading */}
<h1 className="text-3xl font-bold text-black mb-2">
<h1 className="text-3xl font-bold bg-gradient-to-r from-rose-600 via-pink-600 to-rose-600 bg-clip-text text-transparent mb-2">
Welcome back
</h1>
@ -112,7 +112,7 @@ export default function Login() {
{/* Submit Button */}
<Button
type="submit"
className="w-full h-12 text-base font-semibold bg-[#4A90A4] hover:bg-[#3a7a8a] text-white"
className="w-full h-12 text-base font-semibold bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all"
>
Log in
</Button>
@ -124,7 +124,7 @@ export default function Login() {
type="checkbox"
checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)}
className="w-4 h-4 rounded border-gray-300 text-[#4A90A4] focus:ring-2 focus:ring-[#4A90A4] cursor-pointer"
className="w-4 h-4 rounded border-gray-300 text-rose-600 focus:ring-2 focus:ring-rose-500 cursor-pointer"
/>
<span className="text-black">Remember me</span>
</label>