mirror of
https://github.com/docmost/docmost.git
synced 2025-11-18 23:31:10 +10:00
Migrate to Mantine UI framework
This commit is contained in:
Philipinho
3
frontend/src/components/navbar/atoms/sidebar-atom.ts
Normal file
3
frontend/src/components/navbar/atoms/sidebar-atom.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { atomWithWebStorage } from "@/lib/jotai-helper";
|
||||
|
||||
export const desktopSidebarAtom = atomWithWebStorage('showSidebar',true);
|
||||
@ -0,0 +1,8 @@
|
||||
import { useAtom } from "jotai";
|
||||
|
||||
export function useToggleSidebar(sidebarAtom: any) {
|
||||
const [sidebarState, setSidebarState] = useAtom(sidebarAtom);
|
||||
return () => {
|
||||
setSidebarState(!sidebarState);
|
||||
}
|
||||
}
|
||||
89
frontend/src/components/navbar/navbar.module.css
Normal file
89
frontend/src/components/navbar/navbar.module.css
Normal file
@ -0,0 +1,89 @@
|
||||
.navbar {
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
|
||||
height: 100%;
|
||||
width: rem(300px);
|
||||
padding: var(--mantine-spacing-md);
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-left: calc(var(--mantine-spacing-md) * -1);
|
||||
margin-right: calc(var(--mantine-spacing-md) * -1);
|
||||
margin-bottom: var(--mantine-spacing-md);
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
||||
}
|
||||
}
|
||||
|
||||
.searchCode {
|
||||
font-weight: 700;
|
||||
font-size: rem(10px);
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
|
||||
border: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
.menuItems {
|
||||
padding-left: calc(var(--mantine-spacing-md) - var(--mantine-spacing-xs));
|
||||
padding-right: calc(var(--mantine-spacing-md) - var(--mantine-spacing-xs));
|
||||
padding-bottom: var(--mantine-spacing-md);
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
padding: rem(8px) var(--mantine-spacing-xs);
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
font-weight: 500;
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
|
||||
&
|
||||
:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
}
|
||||
}
|
||||
|
||||
.menuItemInner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menuItemIcon {
|
||||
margin-right: var(--mantine-spacing-sm);
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
}
|
||||
|
||||
.pages {
|
||||
padding-left: calc(var(--mantine-spacing-md) - rem(6px));
|
||||
padding-right: calc(var(--mantine-spacing-md) - rem(6px));
|
||||
padding-bottom: var(--mantine-spacing-md);
|
||||
}
|
||||
|
||||
.pagesHeader {
|
||||
padding-left: calc(var(--mantine-spacing-md) + rem(2px));
|
||||
padding-right: var(--mantine-spacing-md);
|
||||
margin-bottom: rem(5px);
|
||||
}
|
||||
|
||||
.pageLink {
|
||||
display: block;
|
||||
padding: rem(8px) var(--mantine-spacing-xs);
|
||||
text-decoration: none;
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
}
|
||||
}
|
||||
118
frontend/src/components/navbar/navbar.tsx
Normal file
118
frontend/src/components/navbar/navbar.tsx
Normal file
@ -0,0 +1,118 @@
|
||||
import {
|
||||
UnstyledButton,
|
||||
Text,
|
||||
Group,
|
||||
ActionIcon,
|
||||
Tooltip,
|
||||
rem,
|
||||
} from '@mantine/core';
|
||||
import {
|
||||
IconSearch,
|
||||
IconPlus,
|
||||
IconSettings,
|
||||
IconFilePlus,
|
||||
} from '@tabler/icons-react';
|
||||
|
||||
import classes from './navbar.module.css';
|
||||
import { UserButton } from './user-button';
|
||||
import React from 'react';
|
||||
import { useAtom } from 'jotai';
|
||||
import { settingsModalAtom } from '@/features/settings/modal/atoms/settings-modal-atom';
|
||||
import SettingsModal from '@/features/settings/modal/settings-modal';
|
||||
|
||||
interface PrimaryMenuItem {
|
||||
icon: React.ElementType;
|
||||
label: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
interface PageItem {
|
||||
emoji: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const primaryMenu: PrimaryMenuItem[] = [
|
||||
{ icon: IconSearch, label: 'Search' },
|
||||
{ icon: IconSettings, label: 'Settings' },
|
||||
{ icon: IconFilePlus, label: 'New Page' },
|
||||
];
|
||||
|
||||
const pages: PageItem[] = [
|
||||
{ emoji: '👍', label: 'Sales' },
|
||||
{ emoji: '🚚', label: 'Deliveries' },
|
||||
{ emoji: '💸', label: 'Discounts' },
|
||||
{ emoji: '💰', label: 'Profits' },
|
||||
{ emoji: '✨', label: 'Reports' },
|
||||
{ emoji: '🛒', label: 'Orders' },
|
||||
{ emoji: '📅', label: 'Events' },
|
||||
{ emoji: '🙈', label: 'Debts' },
|
||||
{ emoji: '💁♀️', label: 'Customers' },
|
||||
];
|
||||
|
||||
export function Navbar() {
|
||||
const [, setSettingsModalOpen] = useAtom(settingsModalAtom);
|
||||
|
||||
const handleMenuItemClick = (label: string) => {
|
||||
if (label === 'Settings') {
|
||||
setSettingsModalOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const primaryMenuItems = primaryMenu.map((menuItem) => (
|
||||
<UnstyledButton key={menuItem.label} className={classes.menu}
|
||||
onClick={() => handleMenuItemClick(menuItem.label)}
|
||||
>
|
||||
<div className={classes.menuItemInner}>
|
||||
<menuItem.icon size={20} className={classes.menuItemIcon} stroke={1.5} />
|
||||
<span>{menuItem.label}</span>
|
||||
</div>
|
||||
</UnstyledButton>
|
||||
));
|
||||
|
||||
const pageLinks = pages.map((page) => (
|
||||
<a
|
||||
href="#"
|
||||
onClick={(event) => event.preventDefault()}
|
||||
key={page.label}
|
||||
className={classes.pageLink}
|
||||
>
|
||||
<span style={{ marginRight: rem(9), fontSize: rem(16) }}>
|
||||
{page.emoji}
|
||||
</span>{' '}
|
||||
{page.label}
|
||||
</a>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className={classes.navbar}>
|
||||
<div className={classes.section}>
|
||||
<UserButton />
|
||||
</div>
|
||||
|
||||
<div className={classes.section}>
|
||||
<div className={classes.menuItems}>{primaryMenuItems}</div>
|
||||
</div>
|
||||
|
||||
<div className={classes.section}>
|
||||
<Group className={classes.pagesHeader} justify="space-between">
|
||||
<Text size="xs" fw={500} c="dimmed">
|
||||
Pages
|
||||
</Text>
|
||||
<Tooltip label="Create page" withArrow position="right">
|
||||
<ActionIcon variant="default" size={18}>
|
||||
<IconPlus
|
||||
style={{ width: rem(12), height: rem(12) }}
|
||||
stroke={1.5}
|
||||
/>
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<div className={classes.pages}>{pageLinks}</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<SettingsModal />
|
||||
</>
|
||||
);
|
||||
}
|
||||
10
frontend/src/components/navbar/user-button.module.css
Normal file
10
frontend/src/components/navbar/user-button.module.css
Normal file
@ -0,0 +1,10 @@
|
||||
.user {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: var(--mantine-spacing-md);
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
|
||||
|
||||
@mixin hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
|
||||
}
|
||||
}
|
||||
28
frontend/src/components/navbar/user-button.tsx
Normal file
28
frontend/src/components/navbar/user-button.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { UnstyledButton, Group, Avatar, Text, rem } from '@mantine/core';
|
||||
import { IconChevronRight } from '@tabler/icons-react';
|
||||
import classes from './user-button.module.css';
|
||||
|
||||
export function UserButton() {
|
||||
return (
|
||||
<UnstyledButton className={classes.user}>
|
||||
<Group>
|
||||
<Avatar
|
||||
src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=255&q=80"
|
||||
radius="xl"
|
||||
/>
|
||||
|
||||
<div style={{ flex: 1 }}>
|
||||
<Text size="sm" fw={500}>
|
||||
Harriette Spoonlicker
|
||||
</Text>
|
||||
|
||||
<Text c="dimmed" size="xs">
|
||||
hspoonlicker@outlook.com
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<IconChevronRight style={{ width: rem(14), height: rem(14) }} stroke={1.5} />
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user