HiveGrid-Wireframes/hivegrid-cloud/apps/web/app/ui/layouts/DefaultPageLayout/DefaultPageLayout.tsx

"use client";
/*
 * Documentation:
 * Avatar — https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
 * Default Page Layout — https://app.subframe.com/f023064a5ca0/library?component=Default+Page+Layout_a57b1c43-310a-493f-b807-8cc88e2452cf
 * Dropdown Menu — https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu_99951515-459b-4286-919e-a89e7549b43b
 * Header Navigation — https://app.subframe.com/f023064a5ca0/library?component=Header+Navigation_9abee202-1896-4bb8-b899-63d76af2825e
 * Icon Button — https://app.subframe.com/f023064a5ca0/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6
 * Sidebar with sections — https://app.subframe.com/f023064a5ca0/library?component=Sidebar+with+sections_f4047c8b-cfb4-4761-b9cf-fbcae8a9b9b5
 */

import React from "react";
import { FeatherCalendarDays } from "@subframe/core";
import { FeatherCalendarPlus } from "@subframe/core";
import { FeatherCheckSquare } from "@subframe/core";
import { FeatherContact } from "@subframe/core";
import { FeatherFolders } from "@subframe/core";
import { FeatherHome } from "@subframe/core";
import { FeatherKanbanSquare } from "@subframe/core";
import { FeatherMessageSquare } from "@subframe/core";
import { FeatherMoreHorizontal } from "@subframe/core";
import { FeatherPhoneCall } from "@subframe/core";
import { FeatherScroll } from "@subframe/core";
import { FeatherSettings } from "@subframe/core";
import { FeatherShare } from "@subframe/core";
import { FeatherSparkles } from "@subframe/core";
import { FeatherToyBrick } from "@subframe/core";
import { FeatherUserCheck } from "@subframe/core";
import { FeatherWorkflow } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import { Avatar } from "../../components/Avatar";
import { DropdownMenu } from "../../components/DropdownMenu";
import { HeaderNavigation } from "../../components/HeaderNavigation";
import { IconButton } from "../../components/IconButton";
import { SidebarWithSections } from "../../components/SidebarWithSections";
import * as SubframeUtils from "../../utils";

export interface DefaultPageLayoutRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  className?: string;
}

const DefaultPageLayoutRoot = React.forwardRef<
  HTMLDivElement,
  DefaultPageLayoutRootProps
>(function DefaultPageLayoutRoot(
  { children, className, ...otherProps }: DefaultPageLayoutRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "flex h-screen w-full items-start",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <SidebarWithSections
        className="mobile:hidden"
        footer={
          <>
            <div className="flex grow shrink-0 basis-0 items-start gap-2">
              <Avatar image="https://res.cloudinary.com/subframe/image/upload/v1711417513/shared/kwut7rhuyivweg8tmyzl.jpg">
                AB
              </Avatar>
              <div className="flex flex-col items-start">
                <span className="font-['Inter'] text-[12px] font-[500] leading-[16px] text-[#171717]">
                  Irvin
                </span>
                <span className="font-['Inter'] text-[12px] font-[400] leading-[16px] text-[#737373]">
                  Founder
                </span>
              </div>
            </div>
            <SubframeCore.DropdownMenu.Root>
              <SubframeCore.DropdownMenu.Trigger asChild={true}>
                <IconButton icon={<FeatherMoreHorizontal />} />
              </SubframeCore.DropdownMenu.Trigger>
              <SubframeCore.DropdownMenu.Portal>
                <SubframeCore.DropdownMenu.Content
                  side="bottom"
                  align="start"
                  sideOffset={4}
                  asChild={true}
                >
                  <DropdownMenu>
                    <DropdownMenu.DropdownItem image="">
                      Option
                    </DropdownMenu.DropdownItem>
                    <DropdownMenu.DropdownItem image="">
                      Option
                    </DropdownMenu.DropdownItem>
                    <DropdownMenu.DropdownItem image="">
                      Option
                    </DropdownMenu.DropdownItem>
                  </DropdownMenu>
                </SubframeCore.DropdownMenu.Content>
              </SubframeCore.DropdownMenu.Portal>
            </SubframeCore.DropdownMenu.Root>
          </>
        }
      >
        <SidebarWithSections.NavItem icon={<FeatherHome />}>
          Dashbord
        </SidebarWithSections.NavItem>
        <SidebarWithSections.NavItem icon={<FeatherContact />}>
          Kontakte
        </SidebarWithSections.NavItem>
        <SidebarWithSections.NavItem icon={<FeatherUserCheck />}>
          Leads
        </SidebarWithSections.NavItem>
        <SidebarWithSections.NavItem icon={<FeatherKanbanSquare />}>
          Pipelines
        </SidebarWithSections.NavItem>
        <SidebarWithSections.NavItem icon={<FeatherCheckSquare />}>
          Aufgaben
        </SidebarWithSections.NavItem>
        <SidebarWithSections.NavDivider />
        <SidebarWithSections.NavSection label="Analytics">
          <SidebarWithSections.NavItem icon={<FeatherCalendarDays />}>
            Kalender
          </SidebarWithSections.NavItem>
          <SidebarWithSections.NavItem icon={<FeatherCalendarPlus />}>
            Terminbuchung
          </SidebarWithSections.NavItem>
          <SidebarWithSections.NavItem icon={<FeatherFolders />}>
            Dateien
          </SidebarWithSections.NavItem>
          <SidebarWithSections.NavItem icon={<FeatherScroll />}>
            Formulare
          </SidebarWithSections.NavItem>
          <SidebarWithSections.NavDivider />
          <SidebarWithSections.NavSection label="Section">
            <SidebarWithSections.NavItem icon={<FeatherMessageSquare />}>
              Chat
            </SidebarWithSections.NavItem>
            <SidebarWithSections.NavItem icon={<FeatherPhoneCall />}>
              Telefonie
            </SidebarWithSections.NavItem>
            <SidebarWithSections.NavItem icon={<FeatherShare />}>
              Marketing
            </SidebarWithSections.NavItem>
          </SidebarWithSections.NavSection>
        </SidebarWithSections.NavSection>
        <SidebarWithSections.NavDivider />
        <SidebarWithSections.NavSection label="Section">
          <SidebarWithSections.NavItem icon={<FeatherWorkflow />}>
            Automation
          </SidebarWithSections.NavItem>
          <SidebarWithSections.NavItem icon={<FeatherSparkles />}>
            KI
          </SidebarWithSections.NavItem>
          <SidebarWithSections.NavDivider />
        </SidebarWithSections.NavSection>
        <SidebarWithSections.NavSection label="Section">
          <SidebarWithSections.NavItem icon={<FeatherToyBrick />}>
             Integrationen
          </SidebarWithSections.NavItem>
          <SidebarWithSections.NavItem icon={<FeatherSettings />}>
            Einstellungen
          </SidebarWithSections.NavItem>
        </SidebarWithSections.NavSection>
      </SidebarWithSections>
      <div className="flex grow shrink-0 basis-0 flex-col items-start self-stretch">
        <HeaderNavigation />
        {children ? (
          <div className="flex w-full grow shrink-0 basis-0 flex-col items-start gap-4 overflow-y-auto bg-[#ffffff]">
            {children}
          </div>
        ) : null}
      </div>
    </div>
  );
});

export const DefaultPageLayout = DefaultPageLayoutRoot;