Feat: Sync Navbar Section Dropdown
Added section context that can be set when section heading scrolls into browser viewport and it's value can be used to set the current value of the navbar dropdown. Added kebab case utility method for converting title to element id.
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ReactNode,
|
||||
createContext,
|
||||
useContext,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
const SectionContext = createContext({});
|
||||
|
||||
export const SectionContextProvider = ({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) => {
|
||||
const [section, setSection] = useState('introduction');
|
||||
|
||||
return (
|
||||
<SectionContext.Provider
|
||||
value={{ section, setSection }}
|
||||
>
|
||||
{children}
|
||||
</SectionContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useSectionContext: any = () =>
|
||||
useContext(SectionContext);
|
||||
Reference in New Issue
Block a user