src/hg/htdocs/style/nice_menu.css c5a326f3cc42beca0b59c284a2819763548c166a

c5a326f3cc42beca0b59c284a2819763548c166a
max
  Wed Jul 8 05:31:13 2026 -0700
Add top-right "Share a link" and "Login" links to the menu bar, refs #10138

New js/topLinks.js drives two links at the top-right of the menu bar on all pages:

- Login: links to the login page when logged out; when logged in it shows the
username and opens an account dialog (My Sessions / My Custom Tracks /
My Track Hubs, change password, sign out).
- Share a link: on hgTracks, one click saves the current view as a session and
shows a copyable short link, with an optional "Specify name" rename step; works
logged-in or anonymously (reserved user "l"). On hgTrackUi and the hgc/hgGene
item-details popup it instead shares the page URL with the hgsid stripped and
the db argument kept.

hgSession gains two JSON endpoints (hgS_doSaveSessionJson, hgS_doRenameSessionJson)
that reuse saveCartAsSession() and addSessionLink(). The menu bar is patched in
lib/web.c (CGI pages) and hgMenubar.c (static pages) via comment placeholders in
globalNavBar.inc. On narrow/phone screens the links collapse into a menu icon with
a dropdown so they no longer overlap the menu.

diff --git src/hg/htdocs/style/nice_menu.css src/hg/htdocs/style/nice_menu.css
index ec7d6540d40..0035a669a4a 100644
--- src/hg/htdocs/style/nice_menu.css
+++ src/hg/htdocs/style/nice_menu.css
@@ -35,40 +35,105 @@
  	font-size:13px;
 	color:#6b6b6b;
 	line-height:19px; 
 	background:#e6e3db;
 	font-family:Arial, Helvetica, sans-serif;
 }*/
 #main-menu-whole {
 	width:100%;
 	min-width:1000px; /* NOTE: must cover all top menu options, else wrapping breaks menu */
 	height:32px;
 	background:#2636d1;
 	font-family: Arial,Helvetica,sans-serif;
 	line-height:19px;
 	font-size:13px;
 	margin:0 0 5px 0;
+	position:relative; /* anchor for #topRightLinks */
 }
 #hgTracks-main-menu-whole {
 	width:100%;
 	min-width:1000px; /* NOTE: must cover all top menu options, else wrapping breaks menu */
 	height:32px;
 	background:#00457c;
 	font-family: Arial,Helvetica,sans-serif;
 	line-height:19px;
 	font-size:13px;
 	margin:0 0 5px 0;
+	position:relative; /* anchor for #topRightLinks */
+}
+/* Top-right utility links (Share a link, Login) - sit at the top-right corner of the bar,
+   separate from the menu list.  Filled by menuBar() in lib/web.c and by hgMenubar.c. */
+#topRightLinks {
+	position:absolute;
+	top:0;
+	right:14px;
+	height:32px;
+	line-height:32px;
+	z-index:3;
+	white-space:nowrap;
+}
+#topRightLinks a.topRightLink {
+	color:#fff;
+	margin-left:18px;
+	text-decoration:none;
+	font-family: Arial,Helvetica,sans-serif;
+	font-size:13px;
+}
+#topRightLinks a.topRightLink:hover {
+	text-decoration:underline;
+}
+/* Hamburger toggle: hidden on wide screens (links shown inline); shown on narrow screens below. */
+#trToggle {
+	display:none;
+}
+/* Narrow / phone screens: the fixed-width (min 1000px) bar scrolls horizontally, so the
+   right-edge-pinned links would collide with "About Us".  Instead pin a menu icon to the visible
+   viewport corner and reveal the links as a dropdown when tapped. */
+@media (max-width: 1100px) {
+	#topRightLinks {
+		position:fixed;
+		top:0;
+		right:0;
+		height:32px;
+		line-height:32px;
+		padding:0 8px;
+		background:#00457c;
+		z-index:1000;
+	}
+	#trToggle {
+		display:inline-block;
+		background:none;
+		border:0;
+		color:#fff;
+		font-size:20px;
+		line-height:32px;
+		cursor:pointer;
+		padding:0;
+	}
+	#topRightLinks a.topRightLink {
+		display:none;
+	}
+	#topRightLinks.trOpen {
+		height:auto;
+	}
+	#topRightLinks.trOpen a.topRightLink {
+		display:block;
+		margin:0;
+		padding:8px 12px;
+		background:#00457c;
+		text-align:right;
+	}
 }
 #main-menu {
 	/* width:1031px; */
 	margin-left: 30px;
 }
 
 
 /* from Jabico ... probably need to apply this to <body>
 #maindiv-whole {
     background: url("../images/internal_bg1.jpg") repeat-x scroll left bottom 	
     	#F9F9F7;
 }
 */
 
 /* from nice_menus_default.css */