fix: app header layer (#6640)
This commit is contained in:
parent
602ae01b0b
commit
5c272db83b
3 changed files with 10 additions and 10 deletions
|
|
@ -110,8 +110,8 @@ export const ExtendedProjectSidebar = observer(() => {
|
||||||
className={cn(
|
className={cn(
|
||||||
"fixed top-0 h-full z-[19] flex flex-col gap-2 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 shadow-md",
|
"fixed top-0 h-full z-[19] flex flex-col gap-2 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 shadow-md",
|
||||||
{
|
{
|
||||||
"translate-x-0 opacity-100": extendedProjectSidebarCollapsed,
|
"translate-x-0 opacity-100 pointer-events-auto": extendedProjectSidebarCollapsed,
|
||||||
"-translate-x-full opacity-0": !extendedProjectSidebarCollapsed,
|
"-translate-x-full opacity-0 pointer-events-none": !extendedProjectSidebarCollapsed,
|
||||||
"left-[70px]": sidebarCollapsed,
|
"left-[70px]": sidebarCollapsed,
|
||||||
"left-[250px]": !sidebarCollapsed,
|
"left-[250px]": !sidebarCollapsed,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -106,8 +106,8 @@ export const ExtendedAppSidebar = observer(() => {
|
||||||
className={cn(
|
className={cn(
|
||||||
"fixed top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md pb-6",
|
"fixed top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md pb-6",
|
||||||
{
|
{
|
||||||
"translate-x-0 opacity-100": extendedSidebarCollapsed,
|
"translate-x-0 opacity-100 pointer-events-auto": extendedSidebarCollapsed,
|
||||||
"-translate-x-full opacity-0": !extendedSidebarCollapsed,
|
"-translate-x-full opacity-0 pointer-events-none": !extendedSidebarCollapsed,
|
||||||
"left-[70px]": sidebarCollapsed,
|
"left-[70px]": sidebarCollapsed,
|
||||||
"left-[250px]": !sidebarCollapsed,
|
"left-[250px]": !sidebarCollapsed,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { FC } from "react";
|
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
import { Menu } from "lucide-react";
|
import { Menu } from "lucide-react";
|
||||||
import { useAppTheme } from "@/hooks/store";
|
import { useAppTheme } from "@/hooks/store";
|
||||||
|
|
||||||
export const SidebarHamburgerToggle: FC = observer(() => {
|
export const SidebarHamburgerToggle = observer(() => {
|
||||||
// store hooks
|
// store hooks
|
||||||
const { toggleSidebar } = useAppTheme();
|
const { toggleSidebar } = useAppTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<button
|
||||||
className="group flex h-7 w-7 flex-shrink-0 cursor-pointer items-center justify-center rounded bg-custom-background-80 transition-all hover:bg-custom-background-90 md:hidden"
|
type="button"
|
||||||
|
className="group flex-shrink-0 size-7 grid place-items-center rounded bg-custom-background-80 transition-all hover:bg-custom-background-90 md:hidden"
|
||||||
onClick={() => toggleSidebar()}
|
onClick={() => toggleSidebar()}
|
||||||
>
|
>
|
||||||
<Menu size={14} className="text-custom-text-200 transition-all group-hover:text-custom-text-100" />
|
<Menu className="size-3.5 text-custom-text-200 transition-all group-hover:text-custom-text-100" />
|
||||||
</div>
|
</button>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue