Show link to admin area in nav

Author: DaneEveritt

resources/scripts/components/NavigationBar.tsx

@@ -5,31 +5,43 @@ import { faLayerGroup } from '@fortawesome/free-solid-svg-icons/faLayerGroup';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons/faUserCircle';
 import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
 import { faSwatchbook } from '@fortawesome/free-solid-svg-icons/faSwatchbook';
+import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
+import { useStoreState } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
 
-export default () => (
-    <div id={'navigation'}>
-        <div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
-            <div id={'logo'}>
-                <Link to={'/'}>
-                    Pterodactyl
-                </Link>
-            </div>
-            <div className={'right-navigation'}>
-                <NavLink to={'/'} exact={true}>
-                    <FontAwesomeIcon icon={faLayerGroup}/>
-                </NavLink>
-                <NavLink to={'/account'}>
-                    <FontAwesomeIcon icon={faUserCircle}/>
-                </NavLink>
-                {process.env.NODE_ENV !== 'production' &&
-                <NavLink to={'/design'}>
-                    <FontAwesomeIcon icon={faSwatchbook}/>
-                </NavLink>
-                }
-                <NavLink to={'/auth/logout'}>
-                    <FontAwesomeIcon icon={faSignOutAlt}/>
-                </NavLink>
+export default () => {
+    const user = useStoreState((state: ApplicationStore) => state.user.data!);
+
+    return (
+        <div id={'navigation'}>
+            <div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
+                <div id={'logo'}>
+                    <Link to={'/'}>
+                        Pterodactyl
+                    </Link>
+                </div>
+                <div className={'right-navigation'}>
+                    <NavLink to={'/'} exact={true}>
+                        <FontAwesomeIcon icon={faLayerGroup}/>
+                    </NavLink>
+                    <NavLink to={'/account'}>
+                        <FontAwesomeIcon icon={faUserCircle}/>
+                    </NavLink>
+                    {user.rootAdmin &&
+                    <a href={'/admin'} target={'_blank'}>
+                        <FontAwesomeIcon icon={faCogs}/>
+                    </a>
+                    }
+                    {process.env.NODE_ENV !== 'production' &&
+                    <NavLink to={'/design'}>
+                        <FontAwesomeIcon icon={faSwatchbook}/>
+                    </NavLink>
+                    }
+                    <NavLink to={'/auth/logout'}>
+                        <FontAwesomeIcon icon={faSignOutAlt}/>
+                    </NavLink>
+                </div>
             </div>
         </div>
-    </div>
-);
+    );
+};