ServicesSidebar.jsx

Go to the documentation of this file.

import React from "react";
 
export function ServicesSidebar({ selected, onSelect, isRootTenant }) {
  const tabs = [
    { id: "domains", label: "Domains", icon: "language" },
    ...(isRootTenant ? [{ id: "domain-requests", label: "Domain Requests", icon: "approval" }] : []),
    { id: "apps", label: "App Services", icon: "deployed_code" },
    { id: "office365", label: "Office 365", icon: "cloud" },
    { id: "hosting", label: "Web Hosting", icon: "dns" },
    { id: "databases", label: "Databases", icon: "storage" },
    { id: "email", label: "Email", icon: "mail", disabled: true },
    { id: "servers", label: "Servers", icon: "computer" },
  ];
 
  return (
    <aside className="services-sidebar">
      {tabs.map((t) => (
        <button
          key={t.id}
          className={`sidebar-btn ${selected === t.id ? "active" : ""}`}
          onClick={() => !t.disabled && onSelect(t.id)}
          disabled={t.disabled}
          title={t.disabled ? "Coming soon" : t.label}
        >
          <span className="material-symbols-outlined">{t.icon}</span>
          <span>{t.label}</span>
        </button>
      ))}
    </aside>
  );
}