@@ -62,9 +62,11 @@ function classNames(...classes) {
62
62
63
63
export default function BotLayout ( {
64
64
children,
65
+ asideSpace = "md:ml-16" ,
65
66
} : {
66
67
children : React . ReactNode ;
67
68
noPadding ?: boolean ;
69
+ asideSpace ?: string ;
68
70
} ) {
69
71
const [ sidebarOpen , setSidebarOpen ] = useState ( false ) ;
70
72
const params = useParams < { id : string } > ( ) ;
@@ -190,7 +192,7 @@ export default function BotLayout({
190
192
</ Transition . Root >
191
193
192
194
< div className = "flex flex-col" >
193
- < div className = "sticky top-0 z-[999] flex h-14 bg-white border-b border-gray-200 dark:bg-[#171717] dark:border-gray-600" >
195
+ < header className = "sticky top-0 z-[999] flex h-14 bg-white border-b border-gray-200 dark:bg-[#171717] dark:border-gray-600" >
194
196
< button
195
197
type = "button"
196
198
className = "border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden dark:border-gray-600 dark:text-gray-200"
@@ -210,55 +212,53 @@ export default function BotLayout({
210
212
{ `v${ __APP_VERSION__ } ` }
211
213
</ span >
212
214
</ Link >
213
-
214
215
< div className = "flex flex-1 justify-end px-4" >
215
216
< div className = "ml-4 flex items-center md:ml-6" >
216
217
< ApplicationMenu />
217
218
</ div >
218
219
</ div >
219
- </ div >
220
- < main className = "flex-1" >
221
- { children }
222
- { /* <div className="py-4">
223
- <div className="h-96 rounded-lg border-4 border-dashed border-gray-200" />
224
- </div> */ }
225
- </ main >
226
- </ div >
227
-
228
- < div className = "hidden md:fixed md:inset-y-0 md:flex md:flex-col " >
229
- < div className = "flex flex-grow flex-col overflow-y-auto border-r border-gray-200 bg-white pt-5 dark:bg-[#171717] dark:border-gray-600" >
230
- < div className = "mt-14 flex flex-grow flex-col" >
231
- < nav className = "flex-1 space-y-1 px-2 pb-4" >
232
- { navigation . map ( ( item ) => (
233
- < Tooltip placement = "right" key = { item . name } title = { item . name } >
234
- < Link
235
- to = { {
236
- pathname : item . href . replace ( ":id" , params . id ! ) ,
237
- } }
238
- className = { classNames (
239
- location . pathname ===
240
- item . href . replace ( ":id" , params . id ! )
241
- ? "bg-gray-100 text-gray-900 dark:bg-[#262626] dark:text-white"
242
- : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white dark:hover:bg-[#262626]" ,
243
- "group flex items-center px-2 py-2 text-sm font-medium rounded-md"
244
- ) }
245
- >
246
- < item . icon
247
- className = { classNames (
248
- location . pathname ===
249
- item . href . replace ( ":id" , params . id ! )
250
- ? "text-gray-500 dark:text-white"
251
- : "text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-white" ,
252
- "flex-shrink-0 h-6 w-6"
253
- ) }
254
- aria-hidden = "true"
255
- />
256
- { /* {item.name} */ }
257
- </ Link >
258
- </ Tooltip >
259
- ) ) }
260
- </ nav >
261
- </ div >
220
+ </ header >
221
+ < div className = "flex flex-1" >
222
+ < aside className = "hidden md:flex md:flex-col md:w-16 md:fixed md:inset-y-0" >
223
+ < div className = "flex flex-grow flex-col overflow-y-auto border-r border-gray-200 bg-white pt-5 dark:bg-[#171717] dark:border-gray-600" >
224
+ < div className = "mt-14 flex flex-grow flex-col" >
225
+ < nav className = "flex-1 space-y-1 px-2 pb-4" >
226
+ { navigation . map ( ( item ) => (
227
+ < Tooltip
228
+ placement = "right"
229
+ key = { item . name }
230
+ title = { item . name }
231
+ >
232
+ < Link
233
+ to = { {
234
+ pathname : item . href . replace ( ":id" , params . id ! ) ,
235
+ } }
236
+ className = { classNames (
237
+ location . pathname ===
238
+ item . href . replace ( ":id" , params . id ! )
239
+ ? "bg-gray-100 text-gray-900 dark:bg-[#262626] dark:text-white"
240
+ : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white dark:hover:bg-[#262626]" ,
241
+ "group flex items-center justify-center px-2 py-2 text-sm font-medium rounded-md"
242
+ ) }
243
+ >
244
+ < item . icon
245
+ className = { classNames (
246
+ location . pathname ===
247
+ item . href . replace ( ":id" , params . id ! )
248
+ ? "text-gray-500 dark:text-white"
249
+ : "text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-white" ,
250
+ "flex-shrink-0 h-6 w-6"
251
+ ) }
252
+ aria-hidden = "true"
253
+ />
254
+ </ Link >
255
+ </ Tooltip >
256
+ ) ) }
257
+ </ nav >
258
+ </ div >
259
+ </ div >
260
+ </ aside >
261
+ < main className = { `flex-1 ${ asideSpace } ` } > { children } </ main >
262
262
</ div >
263
263
</ div >
264
264
</ div >
0 commit comments