refactor(web): simplify docs menu to import-only, show hamburger in sidebarOnly mode

Replace the "Neu" creation menu with an "Importieren" outline button
containing only file import and Wolke import options. Creation is now
handled by the template carousel.

Show the sidebar toggle (hamburger) in sidebarOnly layout mode so users
can still open the sidebar navigation.

Author: Movm

apps/web/src/components/common/Layout/PageLayout.tsx

@@ -119,7 +119,7 @@ const PageLayout = ({
     <GlobalChatProvider>
       <GlobalBridges />
       <div className={layoutClasses}>
-        {!hideHeader && (
+        {!hideHeader ? (
           <header className="fixed top-0 left-0 right-0 z-[1002] flex items-center justify-between px-2 h-12 pointer-events-none">
             <div className="pointer-events-auto">
               <SidebarToggle />
@@ -128,7 +128,13 @@ const PageLayout = ({
               <ProfileButton />
             </div>
           </header>
-        )}
+        ) : isSidebarOnly ? (
+          <div className="fixed top-0 left-0 z-[1002] px-2 h-12 flex items-center pointer-events-none">
+            <div className="pointer-events-auto">
+              <SidebarToggle />
+            </div>
+          </div>
+        ) : null}
         <Sidebar />
         <div className={appContentClasses}>
           <main className={mainClasses}>{children}</main>

apps/web/src/features/docs/DocsPage.tsx

@@ -21,10 +21,7 @@ import {
   Button,
   CardGrid,
   DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
   ResponsiveMenu,
-  ResponsiveMenuSection,
   ResponsiveMenuItem,
 } from '@gruenerator/ui';
 import {
@@ -41,15 +38,12 @@ import {
   FiArrowLeft,
   FiCloud,
   FiFile,
-  FiGrid,
   FiPlus,
   FiSearch,
   FiUpload,
   FiUsers,
   FiX,
-  FiZap,
 } from 'react-icons/fi';
-import { PiKanban, PiPencilLine } from 'react-icons/pi';
 import { useNavigate } from 'react-router-dom';
 
 import withAuthRequired from '../../components/common/LoginRequired/withAuthRequired';
@@ -88,32 +82,15 @@ const SLIDE_EXAMPLES = [
   },
 ];
 
-const CreateNewMenu = memo(function CreateNewMenu({
-  onTemplateSelect,
-  onShowGallery,
+const ImportMenu = memo(function ImportMenu({
   onShowImportDialog,
   onShowWolkeImport,
-  onShowGenerateSlides,
-  onCreateBoard,
 }: {
-  onTemplateSelect: (type: TemplateType) => void;
-  onShowGallery: () => void;
   onShowImportDialog: () => void;
   onShowWolkeImport: () => void;
-  onShowGenerateSlides: () => void;
-  onCreateBoard: (type: 'kanban' | 'whiteboard') => void;
 }) {
   const desktopContent = (
     <>
-      <DropdownMenuLabel>Dokument</DropdownMenuLabel>
-      <DropdownMenuItem onClick={() => onTemplateSelect('blank')}>
-        <FiFile size={16} />
-        Leeres Dokument
-      </DropdownMenuItem>
-      <DropdownMenuItem onClick={onShowGallery}>
-        <FiGrid size={16} />
-        Aus Vorlage…
-      </DropdownMenuItem>
       <DropdownMenuItem onClick={onShowImportDialog}>
         <FiUpload size={16} />
         Datei importieren…
@@ -122,71 +99,31 @@ const CreateNewMenu = memo(function CreateNewMenu({
         <FiCloud size={16} />
         Aus Wolke importieren…
       </DropdownMenuItem>
-      <DropdownMenuSeparator />
-      {/* <DropdownMenuLabel>Präsentation</DropdownMenuLabel>
-      <DropdownMenuItem onClick={onShowGenerateSlides}>
-        <FiZap size={16} />
-        KI-Präsentation erstellen
-      </DropdownMenuItem>
-      <DropdownMenuSeparator /> */}
-      <DropdownMenuLabel>Board</DropdownMenuLabel>
-      <DropdownMenuItem onClick={() => onCreateBoard('kanban')}>
-        <PiKanban size={16} />
-        Neues Board
-      </DropdownMenuItem>
-      <DropdownMenuItem onClick={() => onCreateBoard('whiteboard')}>
-        <PiPencilLine size={16} />
-        Neues Whiteboard
-      </DropdownMenuItem>
     </>
   );
 
   const mobileContent = (
     <>
-      <ResponsiveMenuSection title="Dokument">
-        <ResponsiveMenuItem icon={<FiFile size={16} />} onClick={() => onTemplateSelect('blank')}>
-          Leeres Dokument
-        </ResponsiveMenuItem>
-        <ResponsiveMenuItem icon={<FiGrid size={16} />} onClick={onShowGallery}>
-          Aus Vorlage…
-        </ResponsiveMenuItem>
-        <ResponsiveMenuItem icon={<FiUpload size={16} />} onClick={onShowImportDialog}>
-          Datei importieren…
-        </ResponsiveMenuItem>
-        <ResponsiveMenuItem icon={<FiCloud size={16} />} onClick={onShowWolkeImport}>
-          Aus Wolke importieren…
-        </ResponsiveMenuItem>
-      </ResponsiveMenuSection>
-      {/* <ResponsiveMenuSection title="Präsentation">
-        <ResponsiveMenuItem icon={<FiZap size={16} />} onClick={onShowGenerateSlides}>
-          KI-Präsentation erstellen
-        </ResponsiveMenuItem>
-      </ResponsiveMenuSection> */}
-      <ResponsiveMenuSection title="Board">
-        <ResponsiveMenuItem icon={<PiKanban size={16} />} onClick={() => onCreateBoard('kanban')}>
-          Neues Board
-        </ResponsiveMenuItem>
-        <ResponsiveMenuItem
-          icon={<PiPencilLine size={16} />}
-          onClick={() => onCreateBoard('whiteboard')}
-        >
-          Neues Whiteboard
-        </ResponsiveMenuItem>
-      </ResponsiveMenuSection>
+      <ResponsiveMenuItem icon={<FiUpload size={16} />} onClick={onShowImportDialog}>
+        Datei importieren…
+      </ResponsiveMenuItem>
+      <ResponsiveMenuItem icon={<FiCloud size={16} />} onClick={onShowWolkeImport}>
+        Aus Wolke importieren…
+      </ResponsiveMenuItem>
     </>
   );
 
   return (
     <ResponsiveMenu
       trigger={
-        <Button>
-          <FiPlus size={16} />
-          Neu
+        <Button variant="outline">
+          <FiUpload size={16} />
+          Importieren
         </Button>
       }
       dropdownSide="bottom"
       dropdownAlign="end"
-      sheetTitle="Neu erstellen"
+      sheetTitle="Importieren"
       desktopContent={desktopContent}
       mobileContent={mobileContent}
     />
@@ -550,13 +487,9 @@ function DocumentsContent() {
             </button>
           )}
         </div>
-        <CreateNewMenu
-          onTemplateSelect={handleTemplateSelect}
-          onShowGallery={() => setShowGallery(true)}
+        <ImportMenu
           onShowImportDialog={() => setShowImportDialog(true)}
           onShowWolkeImport={() => setShowWolkeImport(true)}
-          onShowGenerateSlides={() => setShowGenerateSlides(true)}
-          onCreateBoard={handleCreateBoard}
         />
       </div>