+ {/* Theme Toggle */}
+
+
+ {/*
,
)}
+ size="sm"
+ onClick={toggleColorMode}
+ colorScheme={mode('purple', 'orange')}
+ /> */}
+
+ );
+}
diff --git a/courseup/src/components/common/header/components/MobileNavbar/MobileNavbar.tsx b/courseup/src/components/common/header/components/MobileNavbar/MobileNavbar.tsx
new file mode 100644
index 00000000..e6af3adc
--- /dev/null
+++ b/courseup/src/components/common/header/components/MobileNavbar/MobileNavbar.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { useRef } from 'react';
+
+import { ThreeLines, Close } from './svg/svg';
+
+import { NavButtons } from '../NavButtons';
+import classNames from 'classnames';
+import { HeaderContainerProps } from '../../containers/HeaderContainer';
+import { isMobile } from '@lib/utils/mobile';
+
+export function MobileNavbar({ blurBackground, setBlurBackground }: HeaderContainerProps): JSX.Element {
+ const menuOverrride = useRef(false);
+ const unblurListenerAdded = useRef(false);
+
+ const onClick = (): void => {
+ const unBlurBackground = () => {
+ if (!blurBackground) {
+ if (!menuOverrride.current) {
+ document.removeEventListener('click', unBlurBackground);
+ setBlurBackground(false);
+ } else {
+ menuOverrride.current = false;
+ }
+ }
+ };
+ if (!unblurListenerAdded.current) {
+ document.addEventListener('click', unBlurBackground);
+ setBlurBackground(true);
+ }
+ };
+
+ return (
+