Don't display stop watch top bar icon when disabled and hidden when click other place (#22374)

Fix #22286 

When timetracking is disabled, the stop watch top bar icon should be
hidden.
When the stop watch recording popup, it should be allowed to hide with
some operation. Now click any place on this page will hide the popup
window.

templates/base/head_navbar.tmpl

@@ -77,6 +77,7 @@
 		</div>
 	{{else if .IsSigned}}
 		<div class="right stackable menu">
+			{{if EnableTimetracking}}
 			<a class="active-stopwatch-trigger item ui label {{if not .ActiveStopwatch}}hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
 				<span class="text">
 					<span class="fitted item">
@@ -115,6 +116,7 @@
 					</form>
 				</div>
 			</div>
+			{{end}}
 
 			<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
 				<span class="text">

web_src/js/features/stopwatch.js

@@ -24,6 +24,7 @@ export function initStopwatch() {
     trigger: 'click',
     maxWidth: 'none',
     interactive: true,
+    hideOnClick: true,
   });
 
   // global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used.