@@ -3,9 +3,18 @@ import React, { ReactNode } from "react";
33import { Footer } from "components" ;
44import { useAuthState , useUserState } from "context" ;
55import styled from "styled-components" ;
6- import { Site , Container , Button , Grid , List } from "tabler-react" ;
6+ import {
7+ Book ,
8+ DeviceDesktop ,
9+ Home ,
10+ Lock ,
11+ Settings ,
12+ Shield ,
13+ Users ,
14+ } from "tabler-icons-react" ;
15+ import { Avatar , Dropdown , Navigation } from "tabler-react-typescript" ;
716
8- const StyledContainer = styled ( Container ) `
17+ const StyledContainer = styled . div `
918 padding-bottom: 30px;
1019` ;
1120
@@ -16,177 +25,79 @@ function SiteWrapper({ children }: Props) {
1625 const user = useUserState ( ) ;
1726 const { logout } = useAuthState ( ) ;
1827
19- const accountDropdownProps = {
20- avatarURL : user . gravatarUrl ,
21- name : user . nickname ,
22- description : user . roles . includes ( "admin" )
23- ? "Administrator"
24- : "Standard User" ,
25- options : [
26- { icon : "user" , value : "Profile" } ,
27- { icon : "settings" , value : "Settings" } ,
28- { isDivider : true } ,
29- {
30- icon : "help-circle" ,
31- value : "Need help?" ,
32- href : "https://nginxproxymanager.com" ,
33- target : "_blank" ,
34- } ,
35- { icon : "log-out" , value : "Log out" , onClick : logout } ,
36- ] ,
37- } ;
38-
39- const navBarItems = [
40- {
41- value : "Home" ,
42- to : "/" ,
43- icon : "home" ,
44- //LinkComponent: withRouter(NavLink),
45- useExact : true ,
46- } ,
47- {
48- value : "Interface" ,
49- icon : "box" ,
50- subItems : [
51- {
52- value : "Cards Design" ,
53- to : "/cards" ,
54- //LinkComponent: withRouter(NavLink),
55- } ,
56- //{ value: "Charts", to: "/charts", LinkComponent: withRouter(NavLink) },
57- {
58- value : "Pricing Cards" ,
59- to : "/pricing-cards" ,
60- //LinkComponent: withRouter(NavLink),
61- } ,
62- ] ,
63- } ,
64- {
65- value : "Components" ,
66- icon : "calendar" ,
67- /*
68- subItems: [
69- { value: "Maps", to: "/maps", LinkComponent: withRouter(NavLink) },
70- { value: "Icons", to: "/icons", LinkComponent: withRouter(NavLink) },
71- { value: "Store", to: "/store", LinkComponent: withRouter(NavLink) },
72- { value: "Blog", to: "/blog", LinkComponent: withRouter(NavLink) },
73- ],
74- */
75- } ,
76- {
77- value : "Pages" ,
78- icon : "file" ,
79- subItems : [
80- {
81- value : "Profile" ,
82- to : "/profile" ,
83- //LinkComponent: withRouter(NavLink),
84- } ,
85- //{ value: "Login", to: "/login", LinkComponent: withRouter(NavLink) },
86- {
87- value : "Register" ,
88- to : "/register" ,
89- //LinkComponent: withRouter(NavLink),
90- } ,
91- {
92- value : "Forgot password" ,
93- to : "/forgot-password" ,
94- //LinkComponent: withRouter(NavLink),
95- } ,
96- {
97- value : "Empty page" ,
98- to : "/empty-page" ,
99- //LinkComponent: withRouter(NavLink),
100- } ,
101- //{ value: "RTL", to: "/rtl", LinkComponent: withRouter(NavLink) },
102- ] ,
103- } ,
104- {
105- value : "Forms" ,
106- to : "/form-elements" ,
107- icon : "check-square" ,
108- //LinkComponent: withRouter(NavLink),
109- } ,
110- {
111- value : "Gallery" ,
112- to : "/gallery" ,
113- icon : "image" ,
114- //LinkComponent: withRouter(NavLink),
115- } ,
116- {
117- icon : "file-text" ,
118- value : "Documentation" ,
119- to :
120- process . env . NODE_ENV === "production"
121- ? "https://tabler.github.io/tabler-react/documentation"
122- : "/documentation" ,
123- } ,
124- ] ;
125-
12628 return (
127- < Site . Wrapper
128- headerProps = { {
129- href : "/" ,
130- alt : "Nginx Proxy Manager" ,
131- imageURL : "/images/logo-bold-horizontal-grey.svg" ,
132- accountDropdown : accountDropdownProps ,
133- } }
134- navProps = { { itemsObjects : navBarItems } }
135- //routerContextComponentType={withRouter(RouterContextProvider)}
136- footerProps = { {
137- links : [
138- < a href = "#asd" > First Link</ a > ,
139- < a href = "#fg" > Second Link</ a > ,
140- < a href = "#dsg" > Third Link</ a > ,
141- < a href = "#egf" > Fourth Link</ a > ,
142- < a href = "#dsf" > Five Link</ a > ,
143- < a href = "#sdfg" > Sixth Link</ a > ,
144- < a href = "#sdf" > Seventh Link</ a > ,
145- < a href = "#sdf" > Eigth Link</ a > ,
146- ] ,
147- note : "Premium and Open Source dashboard template with responsive and high quality UI. For Free!" ,
148- copyright : (
149- < React . Fragment >
150- Copyright © 2019
151- < a href = "." > Tabler-react</ a > . Theme by
152- < a
153- href = "https://codecalm.net"
154- target = "_blank"
155- rel = "noopener noreferrer" >
156- { " " }
157- codecalm.net
158- </ a > { " " }
159- All rights reserved.
160- </ React . Fragment >
161- ) ,
162- nav : (
163- < React . Fragment >
164- < Grid . Col auto = { true } >
165- < List className = "list-inline list-inline-dots mb-0" >
166- < List . Item className = "list-inline-item" >
167- < a href = "./docs/index.html" > Documentation</ a >
168- </ List . Item >
169- < List . Item className = "list-inline-item" >
170- < a href = "./faq.html" > FAQ</ a >
171- </ List . Item >
172- </ List >
173- </ Grid . Col >
174- < Grid . Col auto = { true } >
175- < Button
176- href = "https://github.com/tabler/tabler-react"
177- size = "sm"
178- outline
179- color = "primary"
180- RootComponent = "a" >
181- Source code
182- </ Button >
183- </ Grid . Col >
184- </ React . Fragment >
185- ) ,
186- } } >
187- < StyledContainer > { children } </ StyledContainer >
29+ < div className = "wrapper" >
30+ < Navigation . Header
31+ theme = "light"
32+ brandContent = {
33+ < a href = "." >
34+ < img
35+ src = "/images/logo-bold-horizontal-grey.svg"
36+ alt = "Nginx Proxy Manager"
37+ className = "navbar-brand-image"
38+ height = "32"
39+ />
40+ </ a >
41+ }
42+ avatar = { < Avatar size = "sm" url = { user . gravatarUrl } /> }
43+ profileName = { user . nickname }
44+ profileSubName = {
45+ user . roles . includes ( "admin" ) ? "Administrator" : "Standard User"
46+ }
47+ profileItems = { [
48+ < Dropdown . Item key = "m1-1" > Set status</ Dropdown . Item > ,
49+ < Dropdown . Item key = "m1-2" > Profile & account</ Dropdown . Item > ,
50+ < Dropdown . Item key = "m1-3" > Feedback</ Dropdown . Item > ,
51+ < Dropdown . Item divider key = "m1-4" /> ,
52+ < Dropdown . Item key = "m1-5" > Settings</ Dropdown . Item > ,
53+ < Dropdown . Item key = "m1-6" onClick = { logout } >
54+ Logout
55+ </ Dropdown . Item > ,
56+ ] }
57+ />
58+ < Navigation . Menu
59+ theme = "light"
60+ className = "mb-3"
61+ items = { [
62+ {
63+ title : "Home" ,
64+ icon : < Home /> ,
65+ active : true ,
66+ } ,
67+ {
68+ title : "Hosts" ,
69+ icon : < DeviceDesktop /> ,
70+ } ,
71+ {
72+ title : "Access Lists" ,
73+ icon : < Lock /> ,
74+ } ,
75+ {
76+ title : "Certificates" ,
77+ icon : < Shield /> ,
78+ } ,
79+ {
80+ title : "Users" ,
81+ icon : < Users /> ,
82+ } ,
83+ {
84+ title : "Audit Log" ,
85+ icon : < Book /> ,
86+ } ,
87+ {
88+ title : "Settings" ,
89+ icon : < Settings /> ,
90+ } ,
91+ ] }
92+ />
93+
94+ < div className = "content" >
95+ < div className = "container-xl" >
96+ < StyledContainer > { children } </ StyledContainer >
97+ </ div >
98+ </ div >
18899 < Footer fixed />
189- </ Site . Wrapper >
100+ </ div >
190101 ) ;
191102}
192103
0 commit comments