baseplate/examples/todo-with-auth0/apps/admin/src/components/layouts/app-sidebar.tsx at 4c3c77468100c689e198ca6e26fc26acb4c218de · halfdomelabs/baseplate · GitHub

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
import { Link } from '@tanstack/react-router';
import { BsCardChecklist } from 'react-icons/bs';
import { FaUserAlt } from 'react-icons/fa';
import { MdHome, MdLogout } from 'react-icons/md';

import { useLogOut } from '@src/hooks/use-log-out';

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '../ui/sidebar';

export function AppSidebar(): React.ReactElement {
  const logOut = useLogOut();

  return (
    <Sidebar>
      <SidebarHeader className="border-b p-4">
        <h2>Admin Dashboard</h2>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {/* TPL_SIDEBAR_LINKS:START */}
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link to="/admin" activeOptions={{ exact: true }}>
                    <MdHome />
                    <span>Home</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link to="/admin/accounts/users/user">
                    <FaUserAlt />
                    <span>User</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link to="/admin/todos/todo-list">
                    <BsCardChecklist />
                    <span>Todo List</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              {/* TPL_SIDEBAR_LINKS:END */}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton onClick={logOut}>
                  <MdLogout />
                  <span>Log Out</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarFooter>
    </Sidebar>
  );
}