diff --git a/app/Http/Controllers/Admin/BaseController.php b/app/Http/Controllers/Admin/BaseController.php index b80676f2e..acdc202bf 100644 --- a/app/Http/Controllers/Admin/BaseController.php +++ b/app/Http/Controllers/Admin/BaseController.php @@ -31,5 +31,6 @@ class BaseController extends Controller public function index(): View { return view('admin.index', ['version' => $this->version]); + // return view('templates/base.core'); } } diff --git a/config/debugbar.php b/config/debugbar.php index f1a1fd753..1367301cc 100644 --- a/config/debugbar.php +++ b/config/debugbar.php @@ -11,7 +11,7 @@ return [ | */ - 'enabled' => null, + 'enabled' => false, /* |-------------------------------------------------------------------------- diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx index b809763b7..2335f44fa 100644 --- a/resources/scripts/components/App.tsx +++ b/resources/scripts/components/App.tsx @@ -1,19 +1,19 @@ import React, { useEffect } from 'react'; import ReactGA from 'react-ga'; import { hot } from 'react-hot-loader/root'; -import { Route, Router, Switch, useLocation } from 'react-router-dom'; +import { BrowserRouter, Route, Switch } from 'react-router-dom'; import { StoreProvider } from 'easy-peasy'; import { store } from '@/state'; import DashboardRouter from '@/routers/DashboardRouter'; import ServerRouter from '@/routers/ServerRouter'; import AuthenticationRouter from '@/routers/AuthenticationRouter'; +import { Provider } from 'react-redux'; import { SiteSettings } from '@/state/settings'; import ProgressBar from '@/components/elements/ProgressBar'; import NotFound from '@/components/screens/NotFound'; -import tw, { GlobalStyles as TailwindGlobalStyles } from 'twin.macro'; +import tw from 'twin.macro'; import GlobalStylesheet from '@/assets/css/GlobalStylesheet'; -import { createBrowserHistory } from 'history'; -import { setupInterceptors } from '@/api/interceptors'; +import AdminRouter from '@/routers/AdminRouter'; interface ExtendedWindow extends Window { SiteConfiguration?: SiteSettings; @@ -31,20 +31,6 @@ interface ExtendedWindow extends Window { }; } -const history = createBrowserHistory({ basename: '/' }); - -setupInterceptors(history); - -const Pageview = () => { - const { pathname } = useLocation(); - - useEffect(() => { - ReactGA.pageview(pathname); - }, [ pathname ]); - - return null; -}; - const App = () => { const { PterodactylUser, SiteConfiguration } = (window as ExtendedWindow); if (PterodactylUser && !store.getState().user.data) { @@ -65,28 +51,28 @@ const App = () => { } useEffect(() => { - if (SiteConfiguration?.analytics) { - ReactGA.initialize(SiteConfiguration!.analytics); - } + ReactGA.initialize(SiteConfiguration!.analytics); + ReactGA.pageview(location.pathname); }, []); return ( <> - - -
- - {SiteConfiguration?.analytics && } - - - - - - - -
+ + +
+ + + + + + + + + +
+ ); diff --git a/resources/scripts/components/admin/AdminContainer.tsx b/resources/scripts/components/admin/AdminContainer.tsx new file mode 100644 index 000000000..61c9b6086 --- /dev/null +++ b/resources/scripts/components/admin/AdminContainer.tsx @@ -0,0 +1,195 @@ +import React, { useState } from 'react'; +import tw from 'twin.macro'; +import { useStoreState } from 'easy-peasy'; +import { ApplicationStore } from '@/state'; +import { NavLink, RouteComponentProps } from 'react-router-dom'; +import styled from 'styled-components/macro'; + +const Sidebar = styled.div` + ${tw`h-screen flex flex-col items-center bg-neutral-900 overflow-x-hidden`}; +`; + +const Navigation = styled.div` + ${tw`w-full flex flex-col px-4`}; + + & > span { + ${tw`font-header font-medium text-xs text-neutral-300 whitespace-no-wrap uppercase ml-4 mb-1`}; + + &:not(:first-of-type) { + ${tw`mt-4`}; + } + } + + & > a { + ${tw`h-10 w-full flex flex-row items-center text-neutral-300 px-4 transition-all duration-100 cursor-pointer`}; + + & > svg { + ${tw`h-6 w-6`}; + } + + & > span { + ${tw`font-header font-medium text-lg leading-none ml-3`}; + } + + &:hover { + ${tw`text-neutral-50`}; + } + + &:active, &.active { + ${tw`text-neutral-50 bg-neutral-800 rounded`} + } + } +`; + +const CollapsedNavigation = styled.div` + ${tw`w-full flex flex-col px-4`}; + + & > span { + ${tw`opacity-0 whitespace-no-wrap`}; + + &:not(:first-of-type) { + ${tw`mt-4`}; + } + } + + & > a { + ${tw`h-10 w-full flex flex-row items-center justify-center text-neutral-300 transition-all duration-100 cursor-pointer`}; + + & > svg { + ${tw`h-6 w-6 flex flex-shrink-0`}; + } + + & > span { + ${tw`hidden`}; + } + + &:hover { + ${tw`text-neutral-50`}; + } + + &:active, &.active { + ${tw`text-neutral-50 bg-neutral-800 rounded`} + } + } +`; + +type Props = { + url: string, +}; + +const NavItems = ({ url }: Props) => { + return ( + <> + Administration + + + + Overview + + + + Settings + + + + API Keys + + + Management + + + + Databases + + + + Locations + + + + Nodes + + + + Servers + + + + Users + + + Service Management + + + + Nests + + + + Packs + + + + Mounts + + + ); +}; + +export default ({ match }: RouteComponentProps<{ id: string }>) => { + const name = useStoreState((state: ApplicationStore) => state.settings.data!.name); + const [ collapsed, setCollapsed ] = useState(); + + return ( +
+ +
{ + setCollapsed(!collapsed); + } + }> + { !collapsed ? +

{name}

+ : + + } +
+ + {!collapsed ? + <> + + + + +
+ Profile Picture + +
+ Matthew Penner + Super Administrator +
+ + + + +
+ + : + <> + + + + + + + + +
+ Profile Picture +
+ + } + +
+ ); +}; diff --git a/resources/scripts/routers/AdminRouter.tsx b/resources/scripts/routers/AdminRouter.tsx new file mode 100644 index 000000000..b45062942 --- /dev/null +++ b/resources/scripts/routers/AdminRouter.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Route, RouteComponentProps, Switch } from 'react-router-dom'; +import TransitionRouter from '@/TransitionRouter'; +import NotFound from '@/components/screens/NotFound'; +import AdminContainer from '@/components/admin/AdminContainer'; + +export default ({ location, match }: RouteComponentProps) => { + return ( + + + + + + + ); +}; diff --git a/resources/views/templates/wrapper.blade.php b/resources/views/templates/wrapper.blade.php index 213f09358..89bb7b566 100644 --- a/resources/views/templates/wrapper.blade.php +++ b/resources/views/templates/wrapper.blade.php @@ -32,7 +32,8 @@ @show @yield('assets')