cosmik.network / semble
A social knowledge tool for researchers built on ATProto
fork atom

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)

Pouria Delfanazari c1fe4675 46887180

+39 -14
unified split
+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 }