Dashboard/ui/layouts/DefaultPageLayoutWithInnerSidebar/DefaultPageLayoutWithInnerSidebar.tsx

"use client";
/*
 * Documentation:
 * Avatar — https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
 * Default Page Layout with inner Sidebar — https://app.subframe.com/f023064a5ca0/library?component=Default+Page+Layout+with+inner+Sidebar_c553a99c-7c6f-4189-84df-318c3f9316b2
 * Dropdown Menu select — https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu+select_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 Inside — https://app.subframe.com/f023064a5ca0/library?component=Sidebar+Inside_f6538807-e4e9-4314-9b2f-aaed19760450
 * Sidebar with sections — https://app.subframe.com/f023064a5ca0/library?component=Sidebar+with+sections_f4047c8b-cfb4-4761-b9cf-fbcae8a9b9b5
 */

import React from "react";
import { FeatherBarChartBig } from "@subframe/core";
import { FeatherBriefcase } from "@subframe/core";
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 { FeatherUser } 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 { DropdownMenuSelect } from "../../components/DropdownMenuSelect";
import { HeaderNavigation } from "../../components/HeaderNavigation";
import { IconButton } from "../../components/IconButton";
import { SidebarInside } from "../../components/SidebarInside";
import { SidebarWithSections } from "../../components/SidebarWithSections";
import * as SubframeUtils from "../../utils";

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

const DefaultPageLayoutWithInnerSidebarRoot = React.forwardRef<
  HTMLDivElement,
  DefaultPageLayoutWithInnerSidebarRootProps
>(function DefaultPageLayoutWithInnerSidebarRoot(
  {
    children,
    className,
    ...otherProps
  }: DefaultPageLayoutWithInnerSidebarRootProps,
  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}
                >
                  <DropdownMenuSelect>
                    <DropdownMenuSelect.DropdownItem image="">
                      Option
                    </DropdownMenuSelect.DropdownItem>
                    <DropdownMenuSelect.DropdownItem image="">
                      Option
                    </DropdownMenuSelect.DropdownItem>
                    <DropdownMenuSelect.DropdownItem image="">
                      Option
                    </DropdownMenuSelect.DropdownItem>
                  </DropdownMenuSelect>
                </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 />
        <div className="flex w-full grow shrink-0 basis-0 items-center">
          <SidebarInside
            variant="closed"
            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 items-start">
                    <span className="self-stretch text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-text-neutral-primary">
                      Irvin
                    </span>
                    <span className="self-stretch text-body-extra-small-regular-0 font-body-extra-small-regular-0 text-text-neutral-tertiary">
                      Founder
                    </span>
                  </div>
                </div>
                <IconButton icon={<FeatherMoreHorizontal />} />
              </>
            }
            visible={true}
          >
            <SidebarInside.NavLabel label="Einstellungen" />
            <SidebarInside.NavItem icon={<FeatherUser />} selected={true}>
              Account
            </SidebarInside.NavItem>
            <SidebarInside.NavDivider />
            <SidebarInside.NavItem icon={<FeatherBriefcase />}>
              Platzhalter
            </SidebarInside.NavItem>
            <SidebarInside.NavItem icon={<FeatherBarChartBig />}>
              Platzhalter
            </SidebarInside.NavItem>
            <SidebarInside.NavDivider />
            <SidebarInside.NavItem
              icon={<FeatherSettings />}
              variant="icon-and-text"
            >
              Platzhalter
            </SidebarInside.NavItem>
          </SidebarInside>
          {children ? (
            <div className="flex grow shrink-0 basis-0 flex-col items-start gap-4 self-stretch overflow-y-auto bg-surface-neutral-secondary">
              {children}
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
});

export const DefaultPageLayoutWithInnerSidebar =
  DefaultPageLayoutWithInnerSidebarRoot;