@greatapps/common 1.1.91 → 1.1.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/navigation/NavItem.mjs +12 -2
- package/dist/components/navigation/NavItem.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs +9 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/dist/store/useMobileNavbarSheet.mjs +6 -3
- package/dist/store/useMobileNavbarSheet.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/navigation/NavItem.tsx +14 -2
- package/src/components/navigation/subcomponents/ProjectSelector.tsx +10 -1
- package/src/store/useMobileNavbarSheet.ts +9 -3
|
@@ -1,17 +1,27 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useAppNavigationContext } from "./AppNavigationContext";
|
|
4
|
+
import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
|
|
3
5
|
function NavItem({ icon: Icon, label, onClick, isActive = false }) {
|
|
6
|
+
const { breakpoint } = useAppNavigationContext();
|
|
7
|
+
const { close } = useMobileNavbarSheet();
|
|
8
|
+
const handleClick = () => {
|
|
9
|
+
onClick();
|
|
10
|
+
if (breakpoint === "mobile") {
|
|
11
|
+
close();
|
|
12
|
+
}
|
|
13
|
+
};
|
|
4
14
|
return /* @__PURE__ */ jsxs(
|
|
5
15
|
"div",
|
|
6
16
|
{
|
|
7
17
|
className: `rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors ${isActive ? "bg-gray-50" : "bg-white hover:bg-gray-100"} active:bg-gray-50`,
|
|
8
|
-
onClick,
|
|
18
|
+
onClick: handleClick,
|
|
9
19
|
children: [
|
|
10
20
|
Icon && /* @__PURE__ */ jsx(
|
|
11
21
|
Icon,
|
|
12
22
|
{
|
|
13
23
|
size: 20,
|
|
14
|
-
|
|
24
|
+
className: isActive ? "text-gray-950" : "text-gray-400"
|
|
15
25
|
}
|
|
16
26
|
),
|
|
17
27
|
/* @__PURE__ */ jsx("span", { className: `paragraph-small-medium ${isActive ? "text-gray-950" : "text-gray-500"}`, children: label })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/navigation/NavItem.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ElementType } from 'react';\r\n\r\ninterface NavItemProps {\r\n icon?: ElementType;\r\n label: string;\r\n onClick: () => void;\r\n isActive?: boolean;\r\n}\r\n\r\nexport function NavItem({ icon: Icon, label, onClick, isActive = false }: NavItemProps) {\r\n return (\r\n <div\r\n className={`rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors ${\r\n isActive ? 'bg-gray-50' : 'bg-white hover:bg-gray-100'\r\n } active:bg-gray-50`}\r\n onClick={
|
|
1
|
+
{"version":3,"sources":["../../../src/components/navigation/NavItem.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ElementType } from 'react';\r\nimport { useAppNavigationContext } from './AppNavigationContext';\r\nimport { useMobileNavbarSheet } from '../../store/useMobileNavbarSheet';\r\n\r\ninterface NavItemProps {\r\n icon?: ElementType;\r\n label: string;\r\n onClick: () => void;\r\n isActive?: boolean;\r\n}\r\n\r\nexport function NavItem({ icon: Icon, label, onClick, isActive = false }: NavItemProps) {\r\n const { breakpoint } = useAppNavigationContext();\r\n const { close } = useMobileNavbarSheet();\r\n\r\n const handleClick = () => {\r\n onClick();\r\n if (breakpoint === 'mobile') {\r\n close();\r\n }\r\n };\r\n\r\n return (\r\n <div\r\n className={`rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors ${\r\n isActive ? 'bg-gray-50' : 'bg-white hover:bg-gray-100'\r\n } active:bg-gray-50`}\r\n onClick={handleClick}\r\n >\r\n {Icon && (\r\n <Icon\r\n size={20}\r\n className={isActive ? 'text-gray-950' : 'text-gray-400'}\r\n />\r\n )}\r\n <span className={`paragraph-small-medium ${isActive ? 'text-gray-950' : 'text-gray-500'}`}>\r\n {label}\r\n </span>\r\n </div>\r\n );\r\n}\r\n"],"mappings":";AAyBI,SAOI,KAPJ;AAtBJ,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AAS9B,SAAS,QAAQ,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,MAAM,GAAiB;AACtF,QAAM,EAAE,WAAW,IAAI,wBAAwB;AAC/C,QAAM,EAAE,MAAM,IAAI,qBAAqB;AAEvC,QAAM,cAAc,MAAM;AACxB,YAAQ;AACR,QAAI,eAAe,UAAU;AAC3B,YAAM;AAAA,IACR;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,2EACT,WAAW,eAAe,4BAC5B;AAAA,MACA,SAAS;AAAA,MAER;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAW,WAAW,kBAAkB;AAAA;AAAA,QAC1C;AAAA,QAEF,oBAAC,UAAK,WAAW,0BAA0B,WAAW,kBAAkB,eAAe,IACpF,iBACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState, useRef } from "react";
|
|
3
|
+
import { useState, useRef, useEffect } from "react";
|
|
4
|
+
import { useMobileNavbarSheet } from "../../../store/useMobileNavbarSheet";
|
|
4
5
|
import Image from "next/image";
|
|
5
6
|
import { useAppNavigationContext } from "../AppNavigationContext";
|
|
6
7
|
import { ProjectSelectorPopover } from "../ProjectSelectorPopover";
|
|
@@ -25,6 +26,13 @@ function ProjectSelector({
|
|
|
25
26
|
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
26
27
|
const [activeSection, setActiveSection] = useState(null);
|
|
27
28
|
const titleRef = useRef(null);
|
|
29
|
+
const { openProjectList, clearProjectList } = useMobileNavbarSheet();
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (openProjectList && breakpoint === "mobile") {
|
|
32
|
+
setActiveSection("projects");
|
|
33
|
+
clearProjectList();
|
|
34
|
+
}
|
|
35
|
+
}, [openProjectList, breakpoint, clearProjectList]);
|
|
28
36
|
if (breakpoint === "desktop" || breakpoint === "md") {
|
|
29
37
|
return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
30
38
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 truncate select-none", ref: titleRef, children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useRef, RefObject } from 'react';\r\nimport Image from 'next/image';\r\nimport { useAppNavigationContext } from '../AppNavigationContext';\r\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\r\nimport { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';\r\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../../../index';\r\nimport { ChevronDown, Plus, Settings } from 'lucide-react';\r\nimport type { NavigationProject } from '../types';\r\n\r\nexport interface ProjectSelectorProps {\r\n projects: NavigationProject[];\r\n selectedProject: NavigationProject | null;\r\n isLoading?: boolean;\r\n onSelectProject: (project: NavigationProject) => void;\r\n onAddProject: () => void;\r\n onManageProjects: () => void;\r\n}\r\n\r\nfunction ProjectItemSkeleton() {\r\n return (\r\n <div className=\"flex items-center gap-2 p-2\">\r\n <div className=\"size-8 rounded-lg bg-gray-100 animate-pulse shrink-0\" />\r\n <div className=\"h-3.5 w-32 rounded bg-gray-100 animate-pulse\" />\r\n </div>\r\n );\r\n}\r\n\r\nexport function ProjectSelector({\r\n projects,\r\n selectedProject,\r\n isLoading,\r\n onSelectProject,\r\n onAddProject,\r\n onManageProjects,\r\n}: ProjectSelectorProps) {\r\n const { breakpoint } = useAppNavigationContext();\r\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\r\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\r\n const titleRef = useRef<HTMLDivElement>(null);\r\n\r\n // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)\r\n if (breakpoint === 'desktop' || breakpoint === 'md') {\r\n return (\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center gap-2 truncate select-none\" ref={titleRef}>\r\n {isLoading ? (\r\n <div className=\"h-4 w-32 rounded bg-gray-100 animate-pulse\" />\r\n ) : (\r\n <span\r\n className=\"cursor-pointer paragraph-medium-semibold text-gray-600 truncate\"\r\n onClick={() => setIsPopoverOpen((v) => !v)}\r\n >\r\n {selectedProject?.title && selectedProject.title.length > 15\r\n ? `${selectedProject.title.slice(0, 15)}…`\r\n : selectedProject?.title}\r\n </span>\r\n )}\r\n <ProjectSelectorPopover\r\n open={isPopoverOpen}\r\n setOpen={setIsPopoverOpen}\r\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\r\n projects={projects}\r\n selectedProject={selectedProject}\r\n onSelectProject={onSelectProject}\r\n onAddProject={onAddProject}\r\n onManageProjects={onManageProjects}\r\n />\r\n </div>\r\n <div className=\"flex items-center gap-2\">\r\n <UsersSelectorPopover projectId={selectedProject?.id} />\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n // Mobile: inline collapsible accordion\r\n return (\r\n <div className=\"flex flex-col gap-2.5\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center gap-1\">\r\n <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\r\n <ChevronDown\r\n size={20}\r\n onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\r\n className={`transition-transform duration-200 cursor-pointer ${\r\n activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\r\n }`}\r\n />\r\n </div>\r\n <UsersSelectorPopover projectId={selectedProject?.id} />\r\n </div>\r\n {activeSection === 'projects' && (\r\n <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-small-semibold\">Projetos</span>\r\n <div className=\"flex items-center gap-1.5\">\r\n <Button variant=\"secondary\" className=\"h-8! paragraph-small-semibold text-gray-950\" onClick={onAddProject}>\r\n <Plus size={16} />\r\n Adicionar\r\n </Button>\r\n <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\r\n <Settings size={18} />\r\n </Button>\r\n </div>\r\n </div>\r\n <Command className=\"gap-2\">\r\n <CommandInput placeholder=\"Busque aqui\" />\r\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n {isLoading ? (\r\n <>\r\n <ProjectItemSkeleton />\r\n <ProjectItemSkeleton />\r\n </>\r\n ) : (\r\n projects.map((project) => (\r\n <CommandItem\r\n key={project.id}\r\n value={project.title}\r\n className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}\r\n onSelect={() => { onSelectProject(project); setActiveSection(null); }}\r\n >\r\n <Image\r\n alt=\"Icon Project\"\r\n src={\r\n project.photo\r\n ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${project.photo}`\r\n : '/images/Logomark.png'\r\n }\r\n width={32}\r\n height={32}\r\n className=\"rounded-lg\"\r\n />\r\n {project.title}\r\n </CommandItem>\r\n ))\r\n )}\r\n </CommandList>\r\n </Command>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useRef, useEffect, RefObject } from 'react';\r\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\r\nimport Image from 'next/image';\r\nimport { useAppNavigationContext } from '../AppNavigationContext';\r\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\r\nimport { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';\r\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../../../index';\r\nimport { ChevronDown, Plus, Settings } from 'lucide-react';\r\nimport type { NavigationProject } from '../types';\r\n\r\nexport interface ProjectSelectorProps {\r\n projects: NavigationProject[];\r\n selectedProject: NavigationProject | null;\r\n isLoading?: boolean;\r\n onSelectProject: (project: NavigationProject) => void;\r\n onAddProject: () => void;\r\n onManageProjects: () => void;\r\n}\r\n\r\nfunction ProjectItemSkeleton() {\r\n return (\r\n <div className=\"flex items-center gap-2 p-2\">\r\n <div className=\"size-8 rounded-lg bg-gray-100 animate-pulse shrink-0\" />\r\n <div className=\"h-3.5 w-32 rounded bg-gray-100 animate-pulse\" />\r\n </div>\r\n );\r\n}\r\n\r\nexport function ProjectSelector({\r\n projects,\r\n selectedProject,\r\n isLoading,\r\n onSelectProject,\r\n onAddProject,\r\n onManageProjects,\r\n}: ProjectSelectorProps) {\r\n const { breakpoint } = useAppNavigationContext();\r\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\r\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\r\n const titleRef = useRef<HTMLDivElement>(null);\r\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\r\n\r\n useEffect(() => {\r\n if (openProjectList && breakpoint === 'mobile') {\r\n setActiveSection('projects');\r\n clearProjectList();\r\n }\r\n }, [openProjectList, breakpoint, clearProjectList]);\r\n\r\n // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)\r\n if (breakpoint === 'desktop' || breakpoint === 'md') {\r\n return (\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center gap-2 truncate select-none\" ref={titleRef}>\r\n {isLoading ? (\r\n <div className=\"h-4 w-32 rounded bg-gray-100 animate-pulse\" />\r\n ) : (\r\n <span\r\n className=\"cursor-pointer paragraph-medium-semibold text-gray-600 truncate\"\r\n onClick={() => setIsPopoverOpen((v) => !v)}\r\n >\r\n {selectedProject?.title && selectedProject.title.length > 15\r\n ? `${selectedProject.title.slice(0, 15)}…`\r\n : selectedProject?.title}\r\n </span>\r\n )}\r\n <ProjectSelectorPopover\r\n open={isPopoverOpen}\r\n setOpen={setIsPopoverOpen}\r\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\r\n projects={projects}\r\n selectedProject={selectedProject}\r\n onSelectProject={onSelectProject}\r\n onAddProject={onAddProject}\r\n onManageProjects={onManageProjects}\r\n />\r\n </div>\r\n <div className=\"flex items-center gap-2\">\r\n <UsersSelectorPopover projectId={selectedProject?.id} />\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n // Mobile: inline collapsible accordion\r\n return (\r\n <div className=\"flex flex-col gap-2.5\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center gap-1\">\r\n <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\r\n <ChevronDown\r\n size={20}\r\n onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\r\n className={`transition-transform duration-200 cursor-pointer ${\r\n activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\r\n }`}\r\n />\r\n </div>\r\n <UsersSelectorPopover projectId={selectedProject?.id} />\r\n </div>\r\n {activeSection === 'projects' && (\r\n <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-small-semibold\">Projetos</span>\r\n <div className=\"flex items-center gap-1.5\">\r\n <Button variant=\"secondary\" className=\"h-8! paragraph-small-semibold text-gray-950\" onClick={onAddProject}>\r\n <Plus size={16} />\r\n Adicionar\r\n </Button>\r\n <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\r\n <Settings size={18} />\r\n </Button>\r\n </div>\r\n </div>\r\n <Command className=\"gap-2\">\r\n <CommandInput placeholder=\"Busque aqui\" />\r\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n {isLoading ? (\r\n <>\r\n <ProjectItemSkeleton />\r\n <ProjectItemSkeleton />\r\n </>\r\n ) : (\r\n projects.map((project) => (\r\n <CommandItem\r\n key={project.id}\r\n value={project.title}\r\n className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}\r\n onSelect={() => { onSelectProject(project); setActiveSection(null); }}\r\n >\r\n <Image\r\n alt=\"Icon Project\"\r\n src={\r\n project.photo\r\n ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${project.photo}`\r\n : '/images/Logomark.png'\r\n }\r\n width={32}\r\n height={32}\r\n className=\"rounded-lg\"\r\n />\r\n {project.title}\r\n </CommandItem>\r\n ))\r\n )}\r\n </CommandList>\r\n </Command>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { create } from "zustand";
|
|
2
2
|
const useMobileNavbarSheet = create((set) => ({
|
|
3
3
|
isOpen: false,
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
openProjectList: false,
|
|
5
|
+
open: () => set({ isOpen: true, openProjectList: false }),
|
|
6
|
+
close: () => set({ isOpen: false, openProjectList: false }),
|
|
7
|
+
toggle: () => set((state) => ({ isOpen: !state.isOpen, openProjectList: false })),
|
|
8
|
+
openWithProjectList: () => set({ isOpen: true, openProjectList: true }),
|
|
9
|
+
clearProjectList: () => set({ openProjectList: false })
|
|
7
10
|
}));
|
|
8
11
|
export {
|
|
9
12
|
useMobileNavbarSheet
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/store/useMobileNavbarSheet.ts"],"sourcesContent":["import { create } from 'zustand';\r\n\r\ninterface MobileNavbarSheetStore {\r\n isOpen: boolean;\r\n open: () => void;\r\n close: () => void;\r\n toggle: () => void;\r\n}\r\n\r\nexport const useMobileNavbarSheet = create<MobileNavbarSheetStore>((set) => ({\r\n isOpen: false,\r\n open: () => set({ isOpen: true }),\r\n close: () => set({ isOpen: false }),\r\n toggle: () => set((state) => ({ isOpen: !state.isOpen })),\r\n}));\r\n"],"mappings":"AAAA,SAAS,cAAc;
|
|
1
|
+
{"version":3,"sources":["../../src/store/useMobileNavbarSheet.ts"],"sourcesContent":["import { create } from 'zustand';\r\n\r\ninterface MobileNavbarSheetStore {\r\n isOpen: boolean;\r\n openProjectList: boolean;\r\n open: () => void;\r\n close: () => void;\r\n toggle: () => void;\r\n openWithProjectList: () => void;\r\n clearProjectList: () => void;\r\n}\r\n\r\nexport const useMobileNavbarSheet = create<MobileNavbarSheetStore>((set) => ({\r\n isOpen: false,\r\n openProjectList: false,\r\n open: () => set({ isOpen: true, openProjectList: false }),\r\n close: () => set({ isOpen: false, openProjectList: false }),\r\n toggle: () => set((state) => ({ isOpen: !state.isOpen, openProjectList: false })),\r\n openWithProjectList: () => set({ isOpen: true, openProjectList: true }),\r\n clearProjectList: () => set({ openProjectList: false }),\r\n}));\r\n"],"mappings":"AAAA,SAAS,cAAc;AAYhB,MAAM,uBAAuB,OAA+B,CAAC,SAAS;AAAA,EAC3E,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,MAAM,MAAM,IAAI,EAAE,QAAQ,MAAM,iBAAiB,MAAM,CAAC;AAAA,EACxD,OAAO,MAAM,IAAI,EAAE,QAAQ,OAAO,iBAAiB,MAAM,CAAC;AAAA,EAC1D,QAAQ,MAAM,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,MAAM,QAAQ,iBAAiB,MAAM,EAAE;AAAA,EAChF,qBAAqB,MAAM,IAAI,EAAE,QAAQ,MAAM,iBAAiB,KAAK,CAAC;AAAA,EACtE,kBAAkB,MAAM,IAAI,EAAE,iBAAiB,MAAM,CAAC;AACxD,EAAE;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import { ElementType } from 'react';
|
|
4
|
+
import { useAppNavigationContext } from './AppNavigationContext';
|
|
5
|
+
import { useMobileNavbarSheet } from '../../store/useMobileNavbarSheet';
|
|
4
6
|
|
|
5
7
|
interface NavItemProps {
|
|
6
8
|
icon?: ElementType;
|
|
@@ -10,17 +12,27 @@ interface NavItemProps {
|
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
export function NavItem({ icon: Icon, label, onClick, isActive = false }: NavItemProps) {
|
|
15
|
+
const { breakpoint } = useAppNavigationContext();
|
|
16
|
+
const { close } = useMobileNavbarSheet();
|
|
17
|
+
|
|
18
|
+
const handleClick = () => {
|
|
19
|
+
onClick();
|
|
20
|
+
if (breakpoint === 'mobile') {
|
|
21
|
+
close();
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
13
25
|
return (
|
|
14
26
|
<div
|
|
15
27
|
className={`rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors ${
|
|
16
28
|
isActive ? 'bg-gray-50' : 'bg-white hover:bg-gray-100'
|
|
17
29
|
} active:bg-gray-50`}
|
|
18
|
-
onClick={
|
|
30
|
+
onClick={handleClick}
|
|
19
31
|
>
|
|
20
32
|
{Icon && (
|
|
21
33
|
<Icon
|
|
22
34
|
size={20}
|
|
23
|
-
|
|
35
|
+
className={isActive ? 'text-gray-950' : 'text-gray-400'}
|
|
24
36
|
/>
|
|
25
37
|
)}
|
|
26
38
|
<span className={`paragraph-small-medium ${isActive ? 'text-gray-950' : 'text-gray-500'}`}>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { useState, useRef, RefObject } from 'react';
|
|
3
|
+
import { useState, useRef, useEffect, RefObject } from 'react';
|
|
4
|
+
import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
|
|
4
5
|
import Image from 'next/image';
|
|
5
6
|
import { useAppNavigationContext } from '../AppNavigationContext';
|
|
6
7
|
import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
|
|
@@ -39,6 +40,14 @@ export function ProjectSelector({
|
|
|
39
40
|
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
40
41
|
const [activeSection, setActiveSection] = useState<'projects' | null>(null);
|
|
41
42
|
const titleRef = useRef<HTMLDivElement>(null);
|
|
43
|
+
const { openProjectList, clearProjectList } = useMobileNavbarSheet();
|
|
44
|
+
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
if (openProjectList && breakpoint === 'mobile') {
|
|
47
|
+
setActiveSection('projects');
|
|
48
|
+
clearProjectList();
|
|
49
|
+
}
|
|
50
|
+
}, [openProjectList, breakpoint, clearProjectList]);
|
|
42
51
|
|
|
43
52
|
// Desktop and md: title + popover + users selector (same visual as current gpages sidebars)
|
|
44
53
|
if (breakpoint === 'desktop' || breakpoint === 'md') {
|
|
@@ -2,14 +2,20 @@ import { create } from 'zustand';
|
|
|
2
2
|
|
|
3
3
|
interface MobileNavbarSheetStore {
|
|
4
4
|
isOpen: boolean;
|
|
5
|
+
openProjectList: boolean;
|
|
5
6
|
open: () => void;
|
|
6
7
|
close: () => void;
|
|
7
8
|
toggle: () => void;
|
|
9
|
+
openWithProjectList: () => void;
|
|
10
|
+
clearProjectList: () => void;
|
|
8
11
|
}
|
|
9
12
|
|
|
10
13
|
export const useMobileNavbarSheet = create<MobileNavbarSheetStore>((set) => ({
|
|
11
14
|
isOpen: false,
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
openProjectList: false,
|
|
16
|
+
open: () => set({ isOpen: true, openProjectList: false }),
|
|
17
|
+
close: () => set({ isOpen: false, openProjectList: false }),
|
|
18
|
+
toggle: () => set((state) => ({ isOpen: !state.isOpen, openProjectList: false })),
|
|
19
|
+
openWithProjectList: () => set({ isOpen: true, openProjectList: true }),
|
|
20
|
+
clearProjectList: () => set({ openProjectList: false }),
|
|
15
21
|
}));
|