nandi.uk
This repository has no description
1'use client';
2
3import React, { createContext, use } from 'react';
4import { useLocalStorage } from '@mantine/hooks';
5
6interface NavbarContext {
7 mobileOpened: boolean;
8 desktopOpened: boolean;
9 toggleMobile: () => void;
10 toggleDesktop: () => void;
11}
12
13const NavbarContext = createContext<NavbarContext>({
14 mobileOpened: false,
15 desktopOpened: true,
16 toggleMobile: () => {},
17 toggleDesktop: () => {},
18});
19
20interface Props {
21 children: React.ReactNode;
22}
23
24export function NavbarProvider(props: Props) {
25 const [mobileOpened, setMobileOpened] = useLocalStorage({
26 key: 'navbar-mobile-opened',
27 defaultValue: false,
28 });
29
30 const [desktopOpened, setDesktopOpened] = useLocalStorage({
31 key: 'navbar-desktop-opened',
32 defaultValue: true,
33 });
34
35 const toggleMobile = () => setMobileOpened((o) => !o);
36 const toggleDesktop = () => setDesktopOpened((o) => !o);
37
38 return (
39 <NavbarContext
40 value={{ mobileOpened, desktopOpened, toggleMobile, toggleDesktop }}
41 >
42 {props.children}
43 </NavbarContext>
44 );
45}
46
47export function useNavbarContext() {
48 const context = use(NavbarContext);
49
50 if (!context) {
51 throw new Error('useNavbarContext must be used within a NavbarProvider');
52 }
53
54 return context;
55}