+ {isMobile && sidebarVisible && (
+
setSidebarVisible(false)} />
+ )}
+
+
+
+
+
+ );
+}
diff --git a/wtm-frontend-react/src/core/components/AppSidebar.scss b/wtm-frontend-react/src/core/components/AppSidebar.scss
new file mode 100644
index 0000000..1810f72
--- /dev/null
+++ b/wtm-frontend-react/src/core/components/AppSidebar.scss
@@ -0,0 +1,62 @@
+@use '@/assets/styles/variables' as *;
+
+.app-sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100vh;
+ background: $color-surface-card;
+ border-right: 1px solid $color-border;
+ z-index: $z-sidebar;
+ overflow-y: auto;
+ overflow-x: hidden;
+ transition: width 0.2s ease, transform 0.2s ease;
+
+ &--mobile {
+ transform: translateX(-100%);
+ width: $sidebar-width !important;
+
+ &.app-sidebar--visible {
+ transform: translateX(0);
+ }
+ }
+
+ &--collapsed {
+ .app-sidebar__title,
+ .app-sidebar__nav .p-panelmenu-header-content span,
+ .app-sidebar__nav .p-menuitem-text {
+ display: none;
+ }
+ }
+
+ &__header {
+ display: flex;
+ align-items: center;
+ gap: $space-sm;
+ height: $topbar-height;
+ padding: 0 $space-md;
+ border-bottom: 1px solid $color-border;
+ }
+
+ &__logo {
+ width: 32px;
+ height: 32px;
+ flex-shrink: 0;
+ }
+
+ &__title {
+ font-size: $font-size-lg;
+ font-weight: 700;
+ color: $color-primary;
+ white-space: nowrap;
+ }
+
+ &__nav {
+ padding: $space-sm 0;
+ }
+
+ &__menu .p-panelmenu {
+ border: none;
+ background: transparent;
+ }
+}
diff --git a/wtm-frontend-react/src/core/components/AppSidebar.tsx b/wtm-frontend-react/src/core/components/AppSidebar.tsx
new file mode 100644
index 0000000..e14a375
--- /dev/null
+++ b/wtm-frontend-react/src/core/components/AppSidebar.tsx
@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { PanelMenu } from 'primereact/panelmenu';
+import { MENU_ITEMS, LAYOUT } from '@/core/constants/app.constants';
+import { useCurrentUser } from '@/core/hooks/useCurrentUser';
+import logo from '@/assets/images/logo.svg';
+import './AppSidebar.scss';
+
+interface Props {
+ visible: boolean;
+ collapsed: boolean;
+ mobile: boolean;
+}
+
+export default function AppSidebar({ visible, collapsed, mobile }: Props) {
+ const { currentUser } = useCurrentUser();
+ const navigate = useNavigate();
+
+ const filteredMenu = useMemo(() => {
+ const userRoles = currentUser?.roles ?? [];
+ return MENU_ITEMS
+ .filter((item) => item.roles.some((r) => userRoles.includes(r)))
+ .map((item) => ({
+ ...item,
+ command: item.to ? () => navigate(item.to!) : undefined,
+ items: item.items
+ ? item.items
+ .filter((sub) => sub.roles.some((r) => userRoles.includes(r)))
+ .map((sub) => ({
+ ...sub,
+ command: () => navigate(sub.to),
+ }))
+ : undefined,
+ }));
+ }, [currentUser, navigate]);
+
+ const sidebarWidth = collapsed ? `${LAYOUT.sidebarCollapsedWidth}px` : `${LAYOUT.sidebarWidth}px`;
+
+ const classNames = [
+ 'app-sidebar',
+ visible && 'app-sidebar--visible',
+ collapsed && 'app-sidebar--collapsed',
+ mobile && 'app-sidebar--mobile',
+ ]
+ .filter(Boolean)
+ .join(' ');
+
+ return (
+
+ );
+}
diff --git a/wtm-frontend-react/src/core/components/AppTopbar.scss b/wtm-frontend-react/src/core/components/AppTopbar.scss
new file mode 100644
index 0000000..1300ccf
--- /dev/null
+++ b/wtm-frontend-react/src/core/components/AppTopbar.scss
@@ -0,0 +1,39 @@
+@use '@/assets/styles/variables' as *;
+
+.app-topbar {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ height: $topbar-height;
+ background: $color-surface-card;
+ border-bottom: 1px solid $color-border;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 $space-md;
+ z-index: $z-topbar;
+
+ &__right {
+ display: flex;
+ align-items: center;
+ gap: $space-xs;
+ }
+
+ &__notify-btn {
+ position: relative;
+ }
+
+ &__user-btn {
+ display: flex;
+ align-items: center;
+ gap: $space-sm;
+ }
+
+ &__username {
+ font-size: $font-size-sm;
+ @media (max-width: $bp-tablet) {
+ display: none;
+ }
+ }
+}
diff --git a/wtm-frontend-react/src/core/components/AppTopbar.tsx b/wtm-frontend-react/src/core/components/AppTopbar.tsx
new file mode 100644
index 0000000..bebff5d
--- /dev/null
+++ b/wtm-frontend-react/src/core/components/AppTopbar.tsx
@@ -0,0 +1,47 @@
+import { useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from 'primereact/button';
+import { Avatar } from 'primereact/avatar';
+import { Menu } from 'primereact/menu';
+import { useCurrentUser } from '@/core/hooks/useCurrentUser';
+import './AppTopbar.scss';
+
+interface Props {
+ onToggleSidebar: () => void;
+}
+
+export default function AppTopbar({ onToggleSidebar }: Props) {
+ const { currentUser } = useCurrentUser();
+ const navigate = useNavigate();
+ const userMenu = useRef