Show administration page only when user is admin

src/layouts/dashboard.tsx

@@ -1,13 +1,22 @@
 import { ReactElement } from 'react'
 import { NavLink, Outlet } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
 import {
   Cog6ToothIcon,
   HomeIcon,
   ChartBarIcon,
   LightBulbIcon
 } from '@heroicons/react/24/solid'
 
-function Dashboard(): ReactElement {
+import { me } from '../api/users'
+
+export default function Dashboard(): ReactElement {
+  const { isPending, isError, data } = useQuery({
+    queryKey: ['me'],
+    queryFn: me
+  })
+
   return (
     <div className="flex flex-row w-full h-full bg-gray-50 dark:bg-slate-900">
       <div
@@ -65,21 +74,25 @@ function Dashboard(): ReactElement {
                 Suggestions
               </NavLink>
             </li>
-            <li>
-              <NavLink
-                to="/administration"
-                className={({ isActive }) =>
-                  `w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-white rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-600 ${
-                    isActive
-                      ? 'bg-sky-900'
-                      : 'hover:bg-sky-900 hover:text-white-300'
-                  }`
-                }
-              >
-                <Cog6ToothIcon className="h-5 w-5" />
-                Administration
-              </NavLink>
-            </li>
+            {!isPending &&
+              !isError &&
+              data.is_admin && (
+                <li>
+                  <NavLink
+                    to="/administration"
+                    className={({ isActive }) =>
+                      `w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-white rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-600 ${
+                        isActive
+                          ? 'bg-sky-900'
+                          : 'hover:bg-sky-900 hover:text-white-300'
+                      }`
+                    }
+                  >
+                    <Cog6ToothIcon className="h-5 w-5" />
+                    Administration
+                  </NavLink>
+                </li>
+              )}
           </ul>
         </nav>
       </div>
@@ -90,5 +103,3 @@ function Dashboard(): ReactElement {
     </div>
   )
 }
-
-export default Dashboard