V2: Design Navbar (#4017)

# Description of Changes

- Changed the navbar styling to include all the icons that were on our
figma design
- Added a new link to our index.html to include the MUI symbols. 
- I chose to keep the automate and read icons the same as they were
already because I feel as though they make more sense

```
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,700,0,0" />
```
---

figma vs app dark
<img width="422" height="1038" alt="Screenshot 2025-07-21 at 5 44 19 PM"
src="https://github.com/user-attachments/assets/15d5583f-ce3c-418f-81c6-6e6022f5f4d0"
/>

figma vs app light
<img width="244" height="926" alt="Screenshot 2025-07-21 at 5 57 27 PM"
src="https://github.com/user-attachments/assets/c855d02b-20ee-4ccf-af1f-a3c1a4c2a154"
/>



## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [x] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/hooks/useIsOverflowing.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+
+/**
+ Hook to detect if an element's content overflows its container
+
+
+    Parameters:
+    - ref: React ref to the element to monitor
+    - callback: Optional callback function called when overflow state changes
+
+    Returns: boolean | undefined - true if overflowing, false if not, undefined before first check
+
+    Usage example:
+
+        useEffect(() => {
+        if (isOverflow) {
+            // Do something
+        }
+        }, [isOverflow]);
+
+        const scrollableRef = useRef<HTMLDivElement>(null);
+        const isOverflow = useIsOverflowing(scrollableRef);
+
+        Fallback example (for browsers without ResizeObserver):
+
+        return (
+        <div ref={scrollableRef} className="h-64 overflow-y-auto">
+            {Content that might overflow}
+        </div>
+        );
+*/
+
+
+export const useIsOverflowing = (ref: React.RefObject<HTMLElement | null>, callback?: (isOverflow: boolean) => void) => {
+  // State to track overflow status
+  const [isOverflow, setIsOverflow] = React.useState<boolean | undefined>(undefined);
+
+  React.useLayoutEffect(() => {
+    const { current } = ref;
+
+    // Function to check if element is overflowing
+    const trigger = () => {
+      if (!current) return;
+      
+      // Compare scroll height (total content height) vs client height (visible height)
+      const hasOverflow = current.scrollHeight > current.clientHeight;
+      setIsOverflow(hasOverflow);
+      
+      // Call optional callback with overflow state
+      if (callback) callback(hasOverflow);
+    };
+
+    if (current) {
+      // Use ResizeObserver for modern browsers (real-time detection)
+      if ('ResizeObserver' in window) {
+        const resizeObserver = new ResizeObserver(trigger);
+        resizeObserver.observe(current);
+        
+        // Cleanup function to disconnect observer
+        return () => {
+          resizeObserver.disconnect();
+        };
+      }
+      
+      // Fallback for browsers without ResizeObserver support
+      // Add a small delay to ensure the element is fully rendered
+      setTimeout(trigger, 0);
+    }
+  }, [callback, ref]);
+
+  return isOverflow;
+};