Refactor DashboardNavigation and enhance CSS styles

- Updated `DashboardNavigation` to conditionally render controls based on authentication and platform.
- Improved user experience by displaying a "Farm Control" message when controls are hidden.
- Enhanced CSS for the electron navigation wrapper to include z-index and user-select properties for better UI handling.

assets/stylesheets/App.css

@@ -104,8 +104,10 @@
   line-height: 0.7;
 }
 
-.electron-navigation-wrapper.electrobun-webkit-app-region-drag {
+.electron-navigation-wrapper {
   user-select: none;
+  --webkit-user-select: none;
+  z-index: 10000;
 }
 
 /* Native macOS vibrancy — transparent web content over NSVisualEffectView */

src/components/Dashboard/common/DashboardNavigation.jsx

@@ -52,6 +52,7 @@ const DashboardNavigation = () => {
   const { userProfile } = useContext(AuthContext)
   const { showSpotlight } = useContext(SpotlightContext)
   const { connecting, connected } = useContext(ApiServerContext)
+  const { authenticated } = useContext(AuthContext)
   const { toggleNotificationCenter, unreadCount, notificationCenterVisible } =
     useContext(NotificationContext)
   const [apiServerState, setApiServerState] = useState('disconnected')
@@ -147,6 +148,8 @@ const DashboardNavigation = () => {
   const showDesktopLogo = !isElectron && !isMobile
   const showMobileLogo = !isElectron && isMobile
 
+  const showControls = !isElectron || authenticated
+
   const navigationContents = (
     <Flex style={{ width: '100%' }} align='center'>
       {isMacOSApp ? <DashboardWindowButtons /> : null}
@@ -209,26 +212,41 @@ const DashboardNavigation = () => {
         </Flex>
       )}
       <div style={{ flexGrow: 1 }}>
-        <Menu
-          mode='horizontal'
-          className={isElectron ? 'electron-navigation' : null}
-          items={mainMenuItems}
-          style={{
-            flexWrap: 'wrap',
-            flexGrow: isMobile ? 0 : 1,
-            border: 0,
-            width: isMobile ? '64px' : 'unset'
-          }}
-          onClick={handleMainMenuClick}
-          selectedKeys={[selectedKey]}
-          overflowedIndicator={
-            <Button
-              type='text'
-              icon={<MenuIcon />}
-              style={{ marginBottom: '4px' }}
-            />
-          }
-        />
+        {showControls && (
+          <Menu
+            mode='horizontal'
+            className={isElectron ? 'electron-navigation' : null}
+            items={mainMenuItems}
+            style={{
+              flexWrap: 'wrap',
+              flexGrow: isMobile ? 0 : 1,
+              border: 0,
+              width: isMobile ? '64px' : 'unset'
+            }}
+            onClick={handleMainMenuClick}
+            selectedKeys={[selectedKey]}
+            overflowedIndicator={
+              <Button
+                type='text'
+                icon={<MenuIcon />}
+                style={{ marginBottom: '4px' }}
+              />
+            }
+          />
+        )}
+        {!showControls && (
+          <Text
+            type='secondary'
+            style={{
+              fontSize: '14px',
+              marginLeft: '8px',
+              userSelect: 'none',
+              '--webkit-user-select': 'none'
+            }}
+          >
+            Farm Control
+          </Text>
+        )}
       </div>
       {isMobile && <div style={{ flexGrow: 1 }} />}
 
@@ -238,40 +256,42 @@ const DashboardNavigation = () => {
           align='center'
           style={{ marginTop: '-2px', marginRight: '6px' }}
         >
-          <Space style={{ paddingTop: '2px', marginRight: '8px' }}>
-            <WebAppSwitcher />
-            <KeyboardShortcut
-              shortcut='alt+q'
-              hint='ALT Q'
-              onTrigger={() => showSpotlight()}
-            >
-              <Button
-                icon={<SearchIcon />}
-                type='text'
-                style={{ marginTop: '4px' }}
-                onClick={() => showSpotlight()}
-              />
-            </KeyboardShortcut>
-            <Badge
-              count={unreadCount}
-              size='small'
-              offset={[-5, 8]}
-              style={{ padding: 0, fontWeight: 600 }}
-            >
+          {showControls && (
+            <Space style={{ paddingTop: '2px', marginRight: '8px' }}>
+              <WebAppSwitcher />
               <KeyboardShortcut
-                shortcut='alt+n'
-                hint='ALT N'
-                onTrigger={() => toggleNotificationCenter()}
+                shortcut='alt+q'
+                hint='ALT Q'
+                onTrigger={() => showSpotlight()}
               >
                 <Button
-                  icon={<BellIcon />}
+                  icon={<SearchIcon />}
                   type='text'
-                  style={{ marginTop: '2px' }}
-                  onClick={() => toggleNotificationCenter()}
+                  style={{ marginTop: '4px' }}
+                  onClick={() => showSpotlight()}
                 />
               </KeyboardShortcut>
-            </Badge>
-          </Space>
+              <Badge
+                count={unreadCount}
+                size='small'
+                offset={[-5, 8]}
+                style={{ padding: 0, fontWeight: 600 }}
+              >
+                <KeyboardShortcut
+                  shortcut='alt+n'
+                  hint='ALT N'
+                  onTrigger={() => toggleNotificationCenter()}
+                >
+                  <Button
+                    icon={<BellIcon />}
+                    type='text'
+                    style={{ marginTop: '2px' }}
+                    onClick={() => toggleNotificationCenter()}
+                  />
+                </KeyboardShortcut>
+              </Badge>
+            </Space>
+          )}
           {import.meta.env.MODE === 'development' && (
             <Space>
               {apiServerState === 'connected' ? (
@@ -313,7 +333,7 @@ const DashboardNavigation = () => {
               </Tooltip>
             </Space>
           )}
-          {userProfile ? (
+          {showControls && userProfile ? (
             <Space>
               <Popover
                 content={userPopoverContent}
@@ -329,7 +349,7 @@ const DashboardNavigation = () => {
               </Popover>
             </Space>
           ) : null}
-          {isElectron && availableUpdate ? (
+          {showControls && isElectron && availableUpdate ? (
             <Tag
               icon={<CloudIcon />}
               style={{ cursor: 'pointer', margin: '2px 0 0 0' }}