A social knowledge tool for researchers built on ATProto

feat: consistent navbar collapse

Set separate states for desktop and mobile navbar. This will make it more consistent (you'd expect navbar to show on desktop by default unless minimized by user, and vice versa on mobile)

+39 -14
+22 -4
src/webapp/components/navigation/NavbarToggle.tsx
··· 2 2 3 3 import { useNavbarContext } from '@/providers/navbar'; 4 4 import { ActionIcon } from '@mantine/core'; 5 + import { Fragment } from 'react'; 5 6 import { FiSidebar } from 'react-icons/fi'; 6 7 7 8 export default function NavbarToggle() { 8 - const { toggle } = useNavbarContext(); 9 + const { toggleMobile, toggleDesktop } = useNavbarContext(); 9 10 10 11 return ( 11 - <ActionIcon variant="light" color="gray" size={'lg'} onClick={toggle}> 12 - <FiSidebar /> 13 - </ActionIcon> 12 + <Fragment> 13 + <ActionIcon 14 + variant="light" 15 + color="gray" 16 + size={'lg'} 17 + onClick={toggleMobile} 18 + hiddenFrom="sm" 19 + > 20 + <FiSidebar /> 21 + </ActionIcon> 22 + <ActionIcon 23 + variant="light" 24 + color="gray" 25 + size={'lg'} 26 + onClick={toggleDesktop} 27 + visibleFrom="sm" 28 + > 29 + <FiSidebar /> 30 + </ActionIcon> 31 + </Fragment> 14 32 ); 15 33 }
+2 -2
src/webapp/components/navigation/appLayout/AppLayout.tsx
··· 8 8 } 9 9 10 10 export default function AppLayout(props: Props) { 11 - const { opened } = useNavbarContext(); 11 + const { mobileOpened, desktopOpened } = useNavbarContext(); 12 12 13 13 return ( 14 14 <AppShell ··· 16 16 navbar={{ 17 17 width: 300, 18 18 breakpoint: 'xs', 19 - collapsed: { mobile: !opened, desktop: !opened }, 19 + collapsed: { mobile: !mobileOpened, desktop: !desktopOpened }, 20 20 }} 21 21 > 22 22 {/*<Header />*/}
+15 -8
src/webapp/providers/navbar.tsx
··· 4 4 import { useDisclosure } from '@mantine/hooks'; 5 5 6 6 interface NavbarContext { 7 - opened: boolean; 8 - toggle: () => void; 7 + mobileOpened: boolean; 8 + desktopOpened: boolean; 9 + toggleMobile: () => void; 10 + toggleDesktop: () => void; 9 11 } 10 12 11 13 const NavbarContext = createContext<NavbarContext>({ 12 - opened: true, 13 - toggle: () => {}, 14 + mobileOpened: false, 15 + desktopOpened: true, 16 + toggleMobile: () => {}, 17 + toggleDesktop: () => {}, 14 18 }); 15 19 16 20 interface ProviderProps { 17 21 children: React.ReactNode; 18 22 } 19 23 20 - export function NavbarProvider(props: ProviderProps) { 21 - const [opened, { toggle }] = useDisclosure(); 24 + export function NavbarProvider({ children }: ProviderProps) { 25 + const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(false); 26 + const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true); 22 27 23 28 return ( 24 - <NavbarContext.Provider value={{ opened, toggle }}> 25 - {props.children} 29 + <NavbarContext.Provider 30 + value={{ mobileOpened, desktopOpened, toggleMobile, toggleDesktop }} 31 + > 32 + {children} 26 33 </NavbarContext.Provider> 27 34 ); 28 35 }