Style on the side bar when collapsed.

This commit is contained in:
charles-gauthereau
2024-12-16 12:02:33 +01:00
parent 5484e8841a
commit 3414b55e14
8 changed files with 58 additions and 25 deletions
+1
View File
@@ -20,6 +20,7 @@ export async function POST(
{ status: 400 }
);
}
eventEmitter.emit('modification', { update: true });
const agentId = (await params).agentId;
const formData = await request.formData();
+2
View File
@@ -17,6 +17,8 @@ export async function POST(
) {
try {
eventEmitter.emit('modification', { update: true });
const agentId = (await params).agentId
const body: BodyResultRestore = await request.json();
-11
View File
@@ -1,11 +0,0 @@
// import {NextResponse} from "next/server";
// import {useStore} from "@/state-management/store";
//
// export function middleware(req) {
// // const organizationId = req.cookies.get("organizationId") || "default"; // Retrieve from cookies
// const url = req.nextUrl.clone();
// const {organizationId, moveToAnotherOrganization} = useStore((state) => state);
// console.log("middlewaressss", organizationId);
// // url.searchParams.set("organizationId", organizationId); // Append to query string
// return NextResponse.rewrite(url);
// }
@@ -0,0 +1,18 @@
"use client"
import {useSidebar} from "@/components/ui/sidebar";
export type SideBarFooterCreditProps = {}
export const SideBarFooterCredit = (props: SideBarFooterCreditProps) => {
const {state, isMobile} = useSidebar();
return (
<>
{state === 'expanded' && (
<div className="text-center">
<h1 className="text-[10px]">Portabase Community Edition</h1>
</div>
)}
</>
)
}
@@ -0,0 +1,15 @@
"use client"
import {useSidebar} from "@/components/ui/sidebar";
export type SideBarLogoProps = {}
export const SideBarLogo = (props: SideBarLogoProps) => {
const { state, isMobile } = useSidebar();
return (
<div className="flex justify-center items-center ">
<h1 className="font-bold text-xl">
{state === 'collapsed' && !isMobile ? "P" : "Portabase"}
</h1>
</div>
)
}
@@ -3,7 +3,7 @@ import {
SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu, SidebarMenuButton,
SidebarMenu,
SidebarMenuItem,
} from "@/components/ui/sidebar"
import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
@@ -11,6 +11,8 @@ import {SidebarMenuCustom} from "@/components/wrappers/Dashboard/SideBar/SideBar
import {OrganizationComboBox} from "@/components/wrappers/Organization/OrganizationCombobox";
import {prisma} from "@/prisma";
import {requiredCurrentUser} from "@/auth/current-user";
import {SideBarLogo} from "@/components/wrappers/Dashboard/SideBar/SideBarLogo/SideBarLogo";
import {SideBarFooterCredit} from "@/components/wrappers/Dashboard/SideBar/SideBarFooterCredit/SideBarFooterCredit";
export async function AppSidebar() {
@@ -34,9 +36,7 @@ export async function AppSidebar() {
return (
<Sidebar collapsible="icon">
<SidebarHeader>
<div className="flex justify-center items-center ">
<h1 className="font-bold text-xl">Portabase</h1>
</div>
<SideBarLogo/>
<SidebarMenu>
<SidebarMenuItem>
<OrganizationComboBox
@@ -45,6 +45,8 @@ export async function AppSidebar() {
/>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
@@ -60,9 +62,7 @@ export async function AppSidebar() {
<LoggedInButton/>
</SidebarMenuItem>
</SidebarMenu>
<div className="text-center">
<h1 className="text-[10px]">Portabase Community Edition 1.0.0</h1>
</div>
<SideBarFooterCredit/>
</SidebarFooter>
</Sidebar>
)
@@ -65,7 +65,7 @@ export const UsersDataTable = ({currentUser, table}: usersDataTableProps) => {
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row: Row<User>) => (
<TableRow
className={cn(row.original.id === currentUser.id ? "bg-gray-200 pointer-events-none" : "")}
className={cn(row.original.id === currentUser.id ? "opacity-40 pointer-events-none" : "")}
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
@@ -6,6 +6,7 @@ import {ComboBox} from "@/components/wrappers/combobox";
import {Organization} from "@prisma/client";
import {useStore} from "@/state-management/store";
import {getCurrentOrganizationSlug, setCurrentOrganizationSlug} from "@/features/dashboard/organization";
import {useSidebar} from "@/components/ui/sidebar";
export type organizationComboBoxProps = {
organizations: Organization[]
@@ -24,7 +25,6 @@ export function OrganizationComboBox(props: organizationComboBoxProps) {
useEffect(() => {
getCurrentOrganizationSlug().then(slug => {
console.log("sssssss", slug)
if (slug == "") {
setOrganizationSlug(defaultOrganization.slug)
setCurrentOrganizationSlug(defaultOrganization.slug)
@@ -53,12 +53,20 @@ export function OrganizationComboBox(props: organizationComboBoxProps) {
setCurrentOrganizationSlug(slug)
}
}
const { state, isMobile } = useSidebar();
return (
<ComboBox
sideBar
values={values}
defaultValue={organizationSlug}
onValueChange={onValueChange}/>
<>
{state === 'expanded' && (
<ComboBox
sideBar
values={values}
defaultValue={organizationSlug}
onValueChange={onValueChange}/>
)}
</>
)
}