Remzona54/Remnawave_frontend
1
0
Fork 0
mirror of https://github.com/remnawave/frontend.git synced 2026-05-13 12:16:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: hide sidebar in Infra Billing page

Browse source
This commit is contained in:
kastov 2026-01-05 19:42:43 +03:00
parent 5c2dfb8bf7
commit 817464363d
No known key found for this signature in database
GPG key ID: 1B27BE29057F4C90
5 changed files with 82 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/app/layouts/dashboard/main-layout/main.layout.tsx
View file

@ -4,6 +4,10 @@ import { useEffect, useState } from 'react'
import { Outlet } from 'react-router-dom'
import clsx from 'clsx'
import {
useAppshellStoreActions,
useAppshellStoreDesktopSidebarOpen
} from '@entities/dashboard/appshell'
import { useIsLoadingRemnawaveUpdates, useRemnawaveInfo } from '@entities/dashboard/updates-store'
import { ScrollToTopWrapper } from '@shared/hocs/scroll-to-top/scroll-to-top'
import { SidebarTitleShared } from '@shared/ui/sidebar/sidebar-title'
@ -17,7 +21,7 @@ import classes from './Main.module.css'
export function MainLayout() {
const [mobileOpened, { toggle: toggleMobile }] = useDisclosure()
const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true)
const [isMediaQueryReady, setIsMediaQueryReady] = useState(false)
const pinned = useHeadroom({ fixedAt: 120 })
@ -28,6 +32,9 @@ export function MainLayout() {
getInitialValueInEffect: false
})
const isDesktopSidebarOpen = useAppshellStoreDesktopSidebarOpen()
const { toggleDesktopSidebar } = useAppshellStoreActions()
const remnawaveInfo = useRemnawaveInfo()
const isLoadingUpdates = useIsLoadingRemnawaveUpdates()
@ -53,7 +60,7 @@ export function MainLayout() {
navbar={{
width: 300,
breakpoint: 'lg',
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened }
collapsed: { mobile: !mobileOpened, desktop: !isDesktopSidebarOpen }
}}
padding={isMobile ? 'md' : 'xl'}
transitionDuration={500}
@ -64,8 +71,8 @@ export function MainLayout() {
<Group justify="space-between" style={{ flexWrap: 'nowrap' }}>
<Group style={{ flex: 1, justifyContent: 'flex-start' }}>
<Burger
onClick={isMobile ? toggleMobile : toggleDesktop}
opened={isMobile ? mobileOpened : desktopOpened}
onClick={isMobile ? toggleMobile : toggleDesktopSidebar}
opened={isMobile ? mobileOpened : isDesktopSidebarOpen}
size="md"
/>
</Group>
@ -85,7 +92,7 @@ export function MainLayout() {
</AppShell.Header>
<AppShell.Navbar
className={clsx(classes.sidebarWrapper, {
[classes.sidebarWrapperClosedDesktop]: !isMobile && !desktopOpened,
[classes.sidebarWrapperClosedDesktop]: !isMobile && !isDesktopSidebarOpen,
[classes.sidebarWrapperClosedMobile]: isMobile && !mobileOpened
})}
p="md"
@ -98,8 +105,8 @@ export function MainLayout() {
<Box style={{ position: 'absolute', left: '0' }}>
<Burger
hiddenFrom="lg"
onClick={isMobile ? toggleMobile : toggleDesktop}
opened={isMobile ? mobileOpened : desktopOpened}
onClick={isMobile ? toggleMobile : toggleDesktopSidebar}
opened={isMobile ? mobileOpened : isDesktopSidebarOpen}
size="sm"
/>
</Box>

57
src/entities/dashboard/appshell/appshell-store/appshell-store.ts Normal file
View file

@ -0,0 +1,57 @@
import { devtools } from 'zustand/middleware'
import { create } from '@shared/hocs/store-wrapper'
export interface IState {
desktopSidebarOpen: boolean
}
interface IActions {
actions: {
getInitialState: () => IState
hideDesktopSidebar: () => void
resetState: () => Promise<void>
showDesktopSidebar: () => void
toggleDesktopSidebar: () => void
}
}
const initialState: IState = {
desktopSidebarOpen: true
}
export const useAppshellStore = create<IActions & IState>()(
devtools(
(set) => ({
...initialState,
actions: {
getInitialState: () => {
return initialState
},
resetState: async () => {
set({ ...initialState })
},
toggleDesktopSidebar: () => {
set((state) => ({
desktopSidebarOpen: !state.desktopSidebarOpen
}))
},
hideDesktopSidebar: () => {
set({ desktopSidebarOpen: false })
},
showDesktopSidebar: () => {
set({ desktopSidebarOpen: true })
}
}
}),
{
name: 'appshellStore',
anonymousActionType: 'appshellStore'
}
)
)
export const useAppshellStoreActions = () => useAppshellStore((store) => store.actions)
export const useAppshellStoreDesktopSidebarOpen = () =>
useAppshellStore((state) => state.desktopSidebarOpen)

1
src/entities/dashboard/appshell/appshell-store/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './appshell-store'

1
src/entities/dashboard/appshell/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './appshell-store'

9
src/pages/dashboard/crm/infra-billing/components/infra-billing.page.component.tsx
View file

@ -2,6 +2,7 @@ import { Split } from '@gfazioli/mantine-split-pane'
import { useTranslation } from 'react-i18next'
import { Stack } from '@mantine/core'
import { motion } from 'motion/react'
import { useEffect } from 'react'
import { CreateInfraBillingRecordDrawerWidget } from '@widgets/dashboard/infra-billing/create-infra-billing-record-modal/create-infra-billing-record.modal.widget'
import { CreateInfraBillingNodeModalWidget } from '@widgets/dashboard/infra-billing/create-infra-billing-node-modal/create-infra-billing-node.modal.widget'
@ -12,10 +13,18 @@ import { InfraBillingNodesTableWidget } from '@widgets/dashboard/infra-billing/i
import { InfraProvidersTableWidget } from '@widgets/dashboard/infra-billing/infra-providers-table/infra-providers-table.widget'
import { UpdateBillingDateModalWidget } from '@widgets/dashboard/infra-billing/update-billing-date-modal'
import { StatsWidget } from '@widgets/dashboard/infra-billing/stats-widget/stats.widget'
import { useAppshellStoreActions } from '@entities/dashboard/appshell'
import { Page } from '@shared/ui/page'
export const InfraBillingPageComponent = () => {
const { t } = useTranslation()
const { hideDesktopSidebar } = useAppshellStoreActions()
useEffect(() => {
hideDesktopSidebar()
}, [])
return (
<Page title={t('constants.infra-billing')}>
<motion.div