Conditional navigation display for Teams vs Browser contexts (#133)

* feat: Hide navigation menu in Microsoft Teams integration

- Created useTeamsContext hook to detect Teams environment
- Updated FooterComponent to conditionally hide navigation in Teams
- Navigation now shows in standalone web app and hides in Teams bot

Resolves #124

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: akash2017sky <akash2017sky@users.noreply.github.com>

* Updated the Menu display conditionally. left the power by KnowAll ai

* Highlighted the selected menu

* fixed the code review comments

* Code review comments fixed for the header menu navigation

* Medium code review comments fixed

* Removed wiki handle duplicate navigation

---------

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: akash2017sky <akash2017sky@users.noreply.github.com>

Author: akash2017sky

tabs/src/components/FooterComponent.module.css

@@ -36,6 +36,11 @@
   color: #84cc16;
 }
 
+.navigation a.active {
+  color: #84cc16;
+  font-weight: 600;
+}
+
 .attribution {
   display: flex;
   align-items: center;

tabs/src/components/FooterComponent.tsx

@@ -1,29 +1,35 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import styles from './FooterComponent.module.css';
 import { KNOWALL_CONSTANTS } from '../constants/branding';
+import { useTeamsAuth } from '../hooks/useTeamsAuth';
+import NavigationLinks from './NavigationLinks';
 
 type FooterComponentProps = {
   hidden: boolean;
 };
 
 const FooterComponent: React.FC<FooterComponentProps> = ({ hidden }) => {
+  const { isInTeams } = useTeamsAuth();
 
   if (hidden) {
     return null;
-}
+  }
+
   return (
     <footer className={styles.footer}>
-      <div className={styles.navigation}>
-        <Link to="/feed">Feed</Link>
-        <Link to="/users">Users</Link>
-        <Link to="/rewards">Rewards</Link>
-        <Link to="/wallet">Wallet</Link>
-        <Link to="/settings">Settings</Link>
-      </div>
+      {/* Show navigation links ONLY in Teams context */}
+      {isInTeams && (
+        <nav className={styles.navigation} aria-label="Primary navigation">
+          <NavigationLinks
+            linkClassName=""
+            activeLinkClassName={styles.active}
+          />
+        </nav>
+      )}
+      {/* Always show Powered by KnowAll AI */}
       <div className={styles.attribution}>
         <span className={styles.poweredBy}>Powered by</span>
-         <a
+        <a
           href={KNOWALL_CONSTANTS.website}
           target="_blank"
           rel="noopener noreferrer"
@@ -34,7 +40,6 @@ const FooterComponent: React.FC<FooterComponentProps> = ({ hidden }) => {
         </a>
       </div>
     </footer>
-
   );
 };
 

tabs/src/components/HeaderComponent.module.css

@@ -41,6 +41,41 @@
   transform: scale(1.05);
 }
 
+/* ========================================
+   Navigation Styles
+   ======================================== */
+.navigation {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.navLink {
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px 16px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.navLink:hover {
+  color: #84cc16;
+  background: rgba(132, 204, 22, 0.1);
+}
+
+.navLinkActive {
+  color: #84cc16;
+  background: rgba(132, 204, 22, 0.15);
+  font-weight: 600;
+}
+
+.navLink:focus {
+  outline: 2px solid #84cc16;
+  outline-offset: 2px;
+}
+
 .rightSection {
   display: flex;
   align-items: center;
@@ -197,6 +232,10 @@
     font-size: 18px;
   }
 
+  .navigation {
+    display: none;
+  }
+
   .userDetails {
     display: none;
   }
@@ -229,6 +268,15 @@
 }
 
 /* Loading skeleton styles */
+.navLinkSkeleton {
+  width: 50px;
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
 .userInfoSkeleton {
   display: flex;
   align-items: center;

tabs/src/components/HeaderComponent.tsx

@@ -4,6 +4,7 @@ import { InteractionStatus } from '@azure/msal-browser';
 import { Link } from 'react-router-dom';
 import styles from './HeaderComponent.module.css';
 import { useTeamsAuth } from '../hooks/useTeamsAuth';
+import NavigationLinks from './NavigationLinks';
 
 const HeaderComponent: React.FC = () => {
   const { accounts, inProgress } = useMsal();
@@ -16,7 +17,7 @@ const HeaderComponent: React.FC = () => {
   const dropdownButtonRef = useRef<HTMLDivElement>(null);
 
   // Use shared Teams auth hook
-  const { handleLogout, isLoggingOut, isTeamsInitializing } = useTeamsAuth();
+  const { handleLogout, isLoggingOut, isTeamsInitializing, isInTeams } = useTeamsAuth();
 
   useEffect(() => {
     if (account) {
@@ -99,6 +100,11 @@ const HeaderComponent: React.FC = () => {
   // Show loading skeleton during authentication initialization
   const isLoading = inProgress !== InteractionStatus.None || isTeamsInitializing;
 
+  // Hide header when running inside Microsoft Teams for cleaner integration
+  if (isInTeams) {
+    return null;
+  }
+
   if (isLoading) {
     return (
       <header className={styles.header}>
@@ -108,6 +114,13 @@ const HeaderComponent: React.FC = () => {
               <span className={styles.appName}>Zaplie</span>
             </Link>
           </div>
+          <nav className={styles.navigation} aria-hidden="true">
+            <div className={styles.navLinkSkeleton} />
+            <div className={styles.navLinkSkeleton} />
+            <div className={styles.navLinkSkeleton} />
+            <div className={styles.navLinkSkeleton} />
+            <div className={styles.navLinkSkeleton} />
+          </nav>
           <div className={styles.rightSection}>
             <div className={styles.userInfoSkeleton}>
               <div className={styles.avatarSkeleton} />
@@ -146,6 +159,13 @@ const HeaderComponent: React.FC = () => {
           </Link>
         </div>
 
+        <nav className={styles.navigation} aria-label="Primary navigation">
+          <NavigationLinks
+            linkClassName={styles.navLink}
+            activeLinkClassName={styles.navLinkActive}
+          />
+        </nav>
+
         <div className={styles.rightSection}>
           <div className={styles.userInfoWrapper} ref={dropdownRef}>
             <div

tabs/src/components/NavigationLinks.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { isActivePath } from '../utils/navigation';
+
+/**
+ * Navigation link configuration
+ */
+interface NavLink {
+  path: string;
+  label: string;
+}
+
+/**
+ * Props for the NavigationLinks component
+ */
+interface NavigationLinksProps {
+  /**
+   * CSS class name for each link
+   */
+  linkClassName?: string;
+  /**
+   * CSS class name for active links
+   */
+  activeLinkClassName?: string;
+}
+
+/**
+ * Navigation links configuration - single source of truth for all navigation items
+ */
+const NAV_LINKS: NavLink[] = [
+  { path: '/feed', label: 'Feed' },
+  { path: '/users', label: 'Users' },
+  { path: '/rewards', label: 'Rewards' },
+  { path: '/wallet', label: 'Wallet' },
+  { path: '/settings', label: 'Settings' },
+];
+
+/**
+ * Shared navigation links component used by both Header and Footer.
+ * Provides consistent navigation across the application with proper accessibility support.
+ *
+ * @param props - Component props
+ * @returns Navigation links fragment
+ */
+const NavigationLinks: React.FC<NavigationLinksProps> = ({
+  linkClassName = '',
+  activeLinkClassName = '',
+}) => {
+  const location = useLocation();
+  const isActive = (path: string) => isActivePath(location.pathname, path);
+
+  return (
+    <>
+      {NAV_LINKS.map(({ path, label }) => (
+        <Link
+          key={path}
+          to={path}
+          className={`${linkClassName} ${isActive(path) ? activeLinkClassName : ''}`.trim()}
+          aria-current={isActive(path) ? 'page' : undefined}
+        >
+          {label}
+        </Link>
+      ))}
+    </>
+  );
+};
+
+export default NavigationLinks;

tabs/src/utils/navigation.ts

@@ -0,0 +1,52 @@
+/**
+ * Shared navigation utilities for route matching.
+ * These utilities are used by HeaderComponent and FooterComponent
+ * to determine active navigation states.
+ */
+
+/**
+ * Checks if a given path is currently active based on the current location.
+ *
+ * This function uses precise matching to avoid false positives:
+ * - Exact matches always return true (e.g., '/settings' matches '/settings')
+ * - Nested routes are matched when the current path starts with targetPath + '/'
+ *   (e.g., '/settings/profile' matches '/settings', but '/settings-advanced' does NOT)
+ * - The root path '/' only matches exactly to prevent it from matching all paths
+ * - Trailing slashes are normalized to handle edge cases like '/settings/' matching '/settings'
+ *
+ * @param currentPath - The current location pathname (e.g., location.pathname)
+ * @param targetPath - The navigation target path to check against (e.g., '/settings')
+ * @returns true if the targetPath should be considered active for the currentPath
+ *
+ * @example
+ * isActivePath('/settings', '/settings') // true - exact match
+ * isActivePath('/settings/', '/settings') // true - trailing slash normalized
+ * isActivePath('/settings/profile', '/settings') // true - nested route
+ * isActivePath('/settings-advanced', '/settings') // false - different route
+ * isActivePath('/feed', '/') // false - root only matches exactly
+ */
+export const isActivePath = (currentPath: string, targetPath: string): boolean => {
+  // Validate inputs to prevent runtime errors
+  if (!currentPath || !targetPath) {
+    return false;
+  }
+
+  // Normalize paths by removing trailing slashes (but keep root '/' intact)
+  const normalizedCurrent = currentPath.replace(/\/+$/, '') || '/';
+  const normalizedTarget = targetPath.replace(/\/+$/, '') || '/';
+
+  // Exact match
+  if (normalizedCurrent === normalizedTarget) {
+    return true;
+  }
+
+  // For nested routes: must start with path followed by a slash
+  // This prevents /settings from matching /settings-advanced
+  // But allows /settings to match /settings/profile
+  if (normalizedTarget !== '/') {
+    return normalizedCurrent.startsWith(normalizedTarget + '/');
+  }
+
+  // Special case for root path - only exact match
+  return false;
+};