Catalyst / admin/Synapse-Cortex 14.8 GB / 57.8 GB 40.0 GB free
Help Sign in

admin / Synapse-Cortex

public

Self Hosted ITSM Tool with RBAC/Tenanting and MFA

Code Issues Pull requests Pipelines Packages Security Insights Wiki Settings
Synapse-Cortex / Synapse-Cortexv2 / frontend / src / layout / Sidebar.tsx 3438 B · main 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { NavLink } from 'react-router-dom'
import { useAuth } from '../auth/AuthContext'

const navLinkClass = ({ isActive }: { isActive: boolean }) =>
  `block px-3 py-2 rounded font-display text-xs tracking-wide hover:bg-cortex-panel2 hover:text-accent-blue transition ${
    isActive
      ? 'bg-cortex-panel2 text-accent-blue border-l-2 border-accent-blue'
      : 'border-l-2 border-transparent'
  }`

export function Sidebar() {
  const { user, isAdmin, isGlobalAdmin } = useAuth()

  return (
    <aside className="w-60 shrink-0 bg-cortex-panel border-r border-cortex-border flex flex-col">
      <div className="px-5 py-5 border-b border-cortex-border flex items-center gap-2">
        <img src="/img/cortex-logo.webp" alt="Synapse-Cortex" className="h-9 w-9" />
        <div>
          <div className="text-[9px] text-accent-blue tracking-widest font-display">SYNAPSE</div>
          <div className="text-sm font-display font-bold text-chrome">CORTEX</div>
        </div>
      </div>

      <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
        <NavLink to="/" end className={navLinkClass}>
          &#9635;&nbsp;&nbsp;DASHBOARD
        </NavLink>
        <NavLink to="/tickets" className={navLinkClass}>
          &#9776;&nbsp;&nbsp;TICKETS
        </NavLink>
        <NavLink to="/assets" className={navLinkClass}>
          &#9721;&nbsp;&nbsp;ASSETS (CMDB)
        </NavLink>

        <div className="pt-4 mt-2 border-t border-cortex-border">
          <div className="px-3 pb-1 text-[10px] text-cortex-muted uppercase tracking-widest">Settings</div>
          <NavLink to="/settings" className={navLinkClass}>
            &#9881;&nbsp;&nbsp;PROFILE &amp; MFA
          </NavLink>
        </div>

        {isAdmin && (
          <div className="pt-4 mt-2 border-t border-cortex-border">
            <div className="px-3 pb-1 text-[10px] text-cortex-muted uppercase tracking-widest">Admin</div>
            <NavLink to="/admin/users" className={navLinkClass}>
              &#128100;&nbsp;&nbsp;USERS
            </NavLink>
            <NavLink to="/admin/sla-policies" className={navLinkClass}>
              &#9202;&nbsp;&nbsp;SLA POLICIES
            </NavLink>
            <NavLink to="/admin/asset-types" className={navLinkClass}>
              &#128187;&nbsp;&nbsp;ASSET TYPES
            </NavLink>
            <NavLink to="/admin/integrations" className={navLinkClass}>
              &#128279;&nbsp;&nbsp;INTEGRATIONS
            </NavLink>
            <NavLink to="/admin/audit" className={navLinkClass}>
              &#128220;&nbsp;&nbsp;AUDIT TRAIL
            </NavLink>
            <NavLink to="/admin/playbooks" className={navLinkClass}>
              &#129504;&nbsp;&nbsp;PLAYBOOKS
            </NavLink>
            {isGlobalAdmin && (
              <NavLink to="/admin/ai-settings" className={navLinkClass}>
                &#9889;&nbsp;&nbsp;AI SETTINGS
              </NavLink>
            )}
            {isGlobalAdmin && (
              <NavLink to="/admin/vault" className={navLinkClass}>
                &#128274;&nbsp;&nbsp;VAULT
              </NavLink>
            )}
          </div>
        )}
      </nav>

      <div className="px-4 py-4 border-t border-cortex-border">
        <div className="text-[9px] text-cortex-muted uppercase tracking-widest">Tenant</div>
        <div className="text-xs text-chrome-dim truncate">{user?.tenant_name}</div>
      </div>
    </aside>
  )
}