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.

src/app/context/section.tsx

@@ -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);

src/app/context/theme.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useState,
+} from 'react';
+
+const darkTheme = {
+  color: 'white',
+  backgroundColor: '#05254a',
+};
+
+const lightTheme = {
+  color: 'black',
+  backgroundColor: 'white',
+};
+
+const ThemeContext = createContext({});
+
+export const ThemeContextProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [theme, setTheme] = useState('dark');
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const themes = {
+  dark: darkTheme,
+  light: lightTheme,
+} as { [key: string]: { [key: string]: string } };
+
+export const useThemeContext: any = () =>
+  useContext(ThemeContext);