hide editor

app/(page)/admin/create-news/create-news.tsx

@@ -158,12 +158,12 @@ export const CreateNewsPage = () => {
 
     {/* TinyMCE Editor */}
     <div className="border-t border-slate-50">
-      <Editor
+      {/* <Editor
         apiKey='dmg1hghyf25x09mtg04hik0034yeadt1h6ai2ou68zhdvw11' // Obtenha em tiny.cloud ou use 'no-api-key' para teste
         init={editorConfig}
         value={content}
         onEditorChange={(newContent) => setContent(newContent)}
-      />
+      /> */}
     </div>
   </section>
 

app/components/layout/admin/admin-sidebar-nav.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  BarChart3,
+  FolderPlus,
+  HelpCircle,
+  LayoutDashboard,
+  Newspaper,
+  Settings,
+  Users,
+} from "lucide-react";
+
+type NavLinkItem = {
+  kind: "link";
+  href: string;
+  label: string;
+  icon: ReactNode;
+};
+
+type NavDisabledItem = {
+  kind: "disabled";
+  label: string;
+  icon: ReactNode;
+};
+
+const navItems: (NavLinkItem | NavDisabledItem)[] = [
+  { kind: "link", href: "/admin/dashboard", label: "Painel", icon: <LayoutDashboard size={18} /> },
+  { kind: "disabled", label: "Meus Artigos", icon: <Newspaper size={18} /> },
+  { kind: "disabled", label: "Equipa", icon: <Users size={18} /> },
+  { kind: "disabled", label: "Análises", icon: <BarChart3 size={18} /> },
+  { kind: "link", href: "/admin/create-news", label: "Adicionar Notícia", icon: <Newspaper size={18} /> },
+  {
+    kind: "link",
+    href: "/admin/manage-category",
+    label: "Adicionar categoria",
+    icon: <FolderPlus size={18} />,
+  },
+  { kind: "disabled", label: "Definições", icon: <Settings size={18} /> },
+  { kind: "disabled", label: "Ajuda", icon: <HelpCircle size={18} /> },
+];
+
+function pathIsActive(pathname: string, href: string) {
+  if (pathname === href) return true;
+  if (href === "/admin/dashboard") return false;
+  return pathname.startsWith(`${href}/`);
+}
+
+export function AdminSidebarNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="flex-1 space-y-1">
+      {navItems.map((item) => {
+        if (item.kind === "disabled") {
+          return (
+            <div
+              key={item.label}
+              className="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium text-slate-400 cursor-not-allowed"
+              aria-disabled
+            >
+              {item.icon}
+              {item.label}
+            </div>
+          );
+        }
+
+        const active = pathIsActive(pathname, item.href);
+
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={`flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-all ${
+              active
+                ? "bg-blue-600 text-white shadow-md shadow-blue-200"
+                : "text-slate-500 hover:bg-slate-100"
+            }`}
+            aria-current={active ? "page" : undefined}
+          >
+            {item.icon}
+            {item.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

app/components/layout/admin/sidebar.tsx

@@ -1,7 +1,8 @@
 import { getUserProfile } from "@/src/lib/auth/get-user-profile";
-import { BarChart3, HelpCircle, LayoutDashboard, Newspaper, Settings, Users } from "lucide-react";
 import { redirect } from "next/navigation";
-import Image from 'next/image';
+import Image from "next/image";
+import Link from "next/link";
+import { AdminSidebarNav } from "./admin-sidebar-nav";
 
 export const AdminSideBar = async () => {
   const user = await getUserProfile();
@@ -13,27 +14,24 @@ export const AdminSideBar = async () => {
   return (
     <aside className="w-64 backdrop-blur-xl bg-white/80 border-r border-slate-200 p-6 flex flex-col">
       <div className="flex items-center gap-2 mb-10 px-2">
-    <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold italic">
+        <Link href="/admin/dashboard" className="flex items-center gap-2 group">
+          <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold italic ring-1 ring-slate-200/80 group-hover:ring-blue-200 transition-shadow">
             <Image src="/logo.png" alt="TVone" width={50} height={50} />
           </div>
           <span className="font-bold text-sm tracking-tight leading-tight uppercase">
-        TVone<br/><span className="text-blue-600 text-[10px]">de Notícias</span>
+            TVone
+            <br />
+            <span className="text-blue-600 text-[10px]">de Notícias</span>
           </span>
+        </Link>
       </div>
 
-    <nav className="flex-1 space-y-1">
+      <AdminSidebarNav />
-      <NavItem icon={<LayoutDashboard size={18}/>} label="Painel" />
-      <NavItem icon={<Newspaper size={18}/>} label="Meus Artigos" />
-      <NavItem icon={<Users size={18}/>} label="Equipa" />
-      <NavItem icon={<BarChart3 size={18}/>} label="Análises" />
-      <NavItem icon={<Newspaper size={18}/>} label="Adicionar Notícia" active />
-      <NavItem icon={<Settings size={18}/>} label="Definições" />
-      <NavItem icon={<HelpCircle size={18}/>} label="Ajuda" />
-    </nav>
 
-    {/* User Activity Feed */}
       <div className="mt-auto pt-6 border-t border-slate-200">
-      <h4 className="text-[10px] font-bold uppercase text-slate-400 mb-4 px-2 tracking-widest">Atividade Recente</h4>
+        <h4 className="text-[10px] font-bold uppercase text-slate-400 mb-4 px-2 tracking-widest">
+          Atividade Recente
+        </h4>
         <div className="space-y-3 px-2">
           <ActivityItem user="James Wilson" action="atualizou 'Mercado'" />
           <ActivityItem user="Sarah Johnson" action="criou 'Startups'" />
@@ -43,20 +41,8 @@ export const AdminSideBar = async () => {
   );
 };
 
-
+function ActivityItem({ user, action }: { user: string; action: string }) {
-
+  return (
-
-// Componentes Auxiliares para Limpeza de Código
-const NavItem = ({ icon, label, active = false }: { icon: any, label: string, active?: boolean }) => (
-    <div className={`flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-all cursor-pointer ${
-      active ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'text-slate-500 hover:bg-slate-100'
-    }`}>
-      {icon}
-      {label}
-    </div>
-  );
-  
-  const ActivityItem = ({ user, action }: { user: string, action: string }) => (
     <div className="flex gap-2">
       <div className="w-6 h-6 bg-slate-200 rounded-full shrink-0" />
       <p className="text-[10px] leading-tight text-slate-600">
@@ -64,4 +50,4 @@ const NavItem = ({ icon, label, active = false }: { icon: any, label: string, ac
       </p>
     </div>
   );
-  
+}