feat: navbar and footer

This commit is contained in:
2025-08-19 11:59:58 +04:00
parent d3d8c5117b
commit be034ebbd0
24 changed files with 452 additions and 38 deletions

View File

@ -44,14 +44,15 @@ const Board: FC<Props> = ({ board }) => {
{board.name}
</Text>
</Box>
<BoardMenu
isHovered={
!isMobile &&
(selectedBoard?.id === board.id || isHovered)
}
board={board}
startEditing={startEditing}
/>
{!isMobile && (
<BoardMenu
isHovered={
selectedBoard?.id === board.id || isHovered
}
board={board}
startEditing={startEditing}
/>
)}
</>
)}
modalTitle={"Редактирование доски"}

View File

@ -11,15 +11,14 @@ type Props = {
};
const BoardMenu: FC<Props> = ({ board, startEditing, isHovered = true }) => {
const { selectedBoard, onDeleteBoard } = useBoardsContext();
const { onDeleteBoard } = useBoardsContext();
return (
<Menu>
<Menu.Target>
<Box
style={{
opacity:
isHovered || selectedBoard?.id === board.id ? 1 : 0,
opacity: isHovered ? 1 : 0,
cursor: "pointer",
}}
onClick={e => e.stopPropagation()}>

View File

@ -1,7 +1,7 @@
.container {
cursor: pointer;
height: calc(100vh - 150px);
height: 100%;
@media (max-width: 48em) {
width: 80vw;

View File

@ -6,7 +6,6 @@ import Boards from "@/app/deals/components/shared/Boards/Boards";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
import useIsMobile from "@/hooks/useIsMobile";
const Header = () => {
@ -26,14 +25,11 @@ const Header = () => {
justify={"end"}
wrap={"nowrap"}
pr={"md"}>
<Group wrap={"nowrap"}>
<ColorSchemeToggle />
<ProjectSelect
data={projects}
value={selectedProject}
onChange={value => value && setSelectedProject(value)}
/>
</Group>
<ProjectSelect
data={projects}
value={selectedProject}
onChange={value => value && setSelectedProject(value)}
/>
</Group>
);
};

View File

@ -1,9 +1,8 @@
.container {
height: calc(100vh - 150px);
@media (max-width: 48em) {
width: 80vw;
height: calc(100vh - 200px);
}
}
@ -11,6 +10,10 @@
border-radius: var(--mantine-spacing-md);
gap: 0;
@media (max-width: 48em) {
max-height: calc(100vh - 200px);
}
@mixin light {
background-color: var(--color-light-aqua);
}

View File

@ -22,7 +22,7 @@ const StatusColumnWrapper = ({ renderHeader, children }: Props) => {
scrollbarSize={10}
type={"always"}
scrollbars={"y"}>
<Stack mah={"calc(100vh - 220px)"}>{children}</Stack>
<Stack mah={"calc(100vh - 250px)"}>{children}</Stack>
</ScrollArea>
</Stack>
</Box>