Create Sidebar.tsx

2026-10-19 00:53:21 -06:00
parent e9586acbaa
commit a6b0ea91cd
1 changed files with 123 additions and 0 deletions
@@ -0,0 +1,123 @@
+import Link from "next/link";
+
+type NavItem = {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+};
+
+const NAV_ITEMS: NavItem[] = [
+  {
+    href: "/",
+    label: "Feed",
+    icon: (
+      <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" />
+      </svg>
+    ),
+  },
+  {
+    href: "/ninos",
+    label: "Niños",
+    icon: (
+      <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="9" cy="7" r="3" />
+        <circle cx="17" cy="9" r="2.4" />
+        <path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 20a5 5 0 0 1 5.5-4.9" />
+      </svg>
+    ),
+  },
+  {
+    href: "/avisos",
+    label: "Avisos",
+    icon: (
+      <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0" />
+      </svg>
+    ),
+  },
+  {
+    href: "/mi-cuenta",
+    label: "Mi cuenta",
+    icon: (
+      <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+        <circle cx="12" cy="7" r="4" />
+      </svg>
+    ),
+  },
+];
+
+export default function Sidebar({ activeHref = "/" }: { activeHref?: string }) {
+  return (
+    <aside className="sticky top-0 flex h-screen w-[248px] flex-none flex-col border-r border-[#ECE0D0] bg-[#FFFDF9] px-4 py-6">
+      {/* Logo */}
+      <Link href="/" className="flex items-center gap-[11px] px-2 pb-[22px] pt-1">
+        <div className="flex h-[38px] w-[38px] flex-none items-center justify-center rounded-[12px] bg-[linear-gradient(155deg,#F8C3A8,#F2937A)]">
+          <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="4" />
+            <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+          </svg>
+        </div>
+        <div>
+          <div className="font-display text-[17px] font-semibold leading-none text-[#3F362E]">OpenDayCare</div>
+          <div className="mt-[2px] text-[11.5px] text-[#A89A8B]">Sala Soles</div>
+        </div>
+      </Link>
+
+      {/* Nueva publicación */}
+      <Link
+        href="/crear-publicacion"
+        className="mb-[18px] flex w-full items-center justify-center gap-2 rounded-[14px] bg-[linear-gradient(180deg,#F4977E,#EE8164)] py-3 text-[14.5px] font-extrabold text-white shadow-[0_8px_18px_-8px_rgba(238,129,100,.75)]"
+      >
+        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 5v14M5 12h14" />
+        </svg>
+        Nueva publicación
+      </Link>
+
+      {/* Navegación */}
+      <nav className="flex flex-1 flex-col gap-1">
+        {NAV_ITEMS.map((item) => {
+          const active = item.href === activeHref;
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`flex items-center gap-3 rounded-xl px-3 py-[11px] text-[14.5px] ${
+                active
+                  ? "bg-[#FBE3D8] font-extrabold text-[#D9583C]"
+                  : "bg-transparent font-semibold text-[#6E6359]"
+              }`}
+            >
+              {item.icon}
+              {item.label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* Usuario */}
+      <div className="mt-[10px] border-t border-[#ECE0D0] pt-[14px]">
+        <div className="flex items-center gap-[11px] px-2 py-[6px]">
+          <div className="flex h-[38px] w-[38px] flex-none items-center justify-center rounded-full bg-[#F2937A] font-display text-base font-semibold text-white">
+            C
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-extrabold text-[#3F362E]">Caro Giménez</div>
+            <div className="text-xs text-[#A89A8B]">Maestra · Soles</div>
+          </div>
+          <Link
+            href="/login"
+            title="Cerrar sesión"
+            className="flex h-8 w-8 flex-none items-center justify-center rounded-[10px] bg-[#F6ECDF] text-[#94887B]"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" />
+            </svg>
+          </Link>
+        </div>
+      </div>
+    </aside>
+  );
+}