BasicLayout.tsx 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. import type { JSX, ReactNode } from 'react';
  2. import React from 'react';
  3. import dynamic from 'next/dynamic';
  4. import { RawLayout } from './RawLayout';
  5. import styles from './BasicLayout.module.scss';
  6. const AiAssistantSidebar = dynamic(
  7. () =>
  8. import(
  9. '~/features/openai/client/components/AiAssistant/AiAssistantSidebar/AiAssistantSidebar'
  10. ).then((mod) => mod.AiAssistantSidebar),
  11. { ssr: false },
  12. );
  13. const moduleClass = styles['grw-basic-layout'] ?? '';
  14. const Sidebar = dynamic(
  15. () => import('~/client/components/Sidebar').then((mod) => mod.Sidebar),
  16. { ssr: false },
  17. );
  18. const AlertSiteUrlUndefined = dynamic(
  19. () =>
  20. import('~/client/components/AlertSiteUrlUndefined').then(
  21. (mod) => mod.AlertSiteUrlUndefined,
  22. ),
  23. { ssr: false },
  24. );
  25. const DeleteAttachmentModal = dynamic(
  26. () =>
  27. import('~/client/components/PageAttachment/DeleteAttachmentModal').then(
  28. (mod) => mod.DeleteAttachmentModal,
  29. ),
  30. { ssr: false },
  31. );
  32. const HotkeysManager = dynamic(
  33. () => import('~/client/components/Hotkeys/HotkeysManager'),
  34. { ssr: false },
  35. );
  36. const GrowiNavbarBottom = dynamic(
  37. () =>
  38. import('~/client/components/Navbar/GrowiNavbarBottom').then(
  39. (mod) => mod.GrowiNavbarBottom,
  40. ),
  41. { ssr: false },
  42. );
  43. const ShortcutsModal = dynamic(
  44. () => import('~/client/components/ShortcutsModal'),
  45. { ssr: false },
  46. );
  47. const SystemVersion = dynamic(
  48. () => import('~/client/components/SystemVersion'),
  49. { ssr: false },
  50. );
  51. const PutbackPageModal = dynamic(
  52. () => import('~/client/components/PutbackPageModal'),
  53. { ssr: false },
  54. );
  55. // Page modals
  56. const PageCreateModal = dynamic(
  57. () => import('~/client/components/PageCreateModal'),
  58. { ssr: false },
  59. );
  60. const PageDuplicateModal = dynamic(
  61. () => import('~/client/components/PageDuplicateModal'),
  62. { ssr: false },
  63. );
  64. const PageDeleteModal = dynamic(
  65. () => import('~/client/components/PageDeleteModal'),
  66. { ssr: false },
  67. );
  68. const PageRenameModal = dynamic(
  69. () => import('~/client/components/PageRenameModal'),
  70. { ssr: false },
  71. );
  72. const PagePresentationModal = dynamic(
  73. () => import('~/client/components/PagePresentationModal'),
  74. { ssr: false },
  75. );
  76. const PageAccessoriesModal = dynamic(
  77. () =>
  78. import('~/client/components/PageAccessoriesModal').then(
  79. (mod) => mod.PageAccessoriesModal,
  80. ),
  81. { ssr: false },
  82. );
  83. const GrantedGroupsInheritanceSelectModal = dynamic(
  84. () => import('~/client/components/GrantedGroupsInheritanceSelectModal'),
  85. { ssr: false },
  86. );
  87. const DeleteBookmarkFolderModal = dynamic(
  88. () =>
  89. import('~/client/components/DeleteBookmarkFolderModal').then(
  90. (mod) => mod.DeleteBookmarkFolderModal,
  91. ),
  92. { ssr: false },
  93. );
  94. const SearchModal = dynamic(
  95. () => import('../../features/search/client/components/SearchModal'),
  96. { ssr: false },
  97. );
  98. const PageBulkExportSelectModal = dynamic(
  99. () =>
  100. import(
  101. '../../features/page-bulk-export/client/components/PageBulkExportSelectModal'
  102. ),
  103. { ssr: false },
  104. );
  105. const AiAssistantManagementModal = dynamic(
  106. () =>
  107. import(
  108. '~/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementModal'
  109. ).then((mod) => mod.AiAssistantManagementModal),
  110. { ssr: false },
  111. );
  112. const PageSelectModal = dynamic(
  113. () =>
  114. import('~/client/components/PageSelectModal/PageSelectModal').then(
  115. (mod) => mod.PageSelectModal,
  116. ),
  117. { ssr: false },
  118. );
  119. type Props = {
  120. children?: ReactNode;
  121. className?: string;
  122. };
  123. export const BasicLayout = ({ children, className }: Props): JSX.Element => {
  124. return (
  125. <RawLayout className={`${moduleClass} ${className ?? ''}`}>
  126. <div className="page-wrapper flex-row">
  127. <div className="z-2 d-print-none">
  128. <Sidebar />
  129. </div>
  130. <div className="d-flex flex-grow-1 flex-column mw-0 z-1">
  131. {/* neccessary for nested {children} make expanded */}
  132. <AlertSiteUrlUndefined />
  133. {children}
  134. </div>
  135. <AiAssistantSidebar />
  136. </div>
  137. <GrowiNavbarBottom />
  138. <PageCreateModal />
  139. <PageDuplicateModal />
  140. <PageDeleteModal />
  141. <PageRenameModal />
  142. <PageAccessoriesModal />
  143. <DeleteAttachmentModal />
  144. <DeleteBookmarkFolderModal />
  145. <PutbackPageModal />
  146. <PageSelectModal />
  147. <SearchModal />
  148. <AiAssistantManagementModal />
  149. <PagePresentationModal />
  150. <HotkeysManager />
  151. <ShortcutsModal />
  152. <PageBulkExportSelectModal />
  153. <GrantedGroupsInheritanceSelectModal />
  154. <SystemVersion showShortcutsButton />
  155. </RawLayout>
  156. );
  157. };