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
@@ -1,608 +1,673 @@
 /* @font-face {
  font-family:"Metrophobic";
  src:url(/sites/all/themes/genome/images/font/Metrophobic.ttf);
  src:local('Metrophobic'), url(/sites/all/themes/genome/images/font/Metrophobic.otf);
 } */
 
 /* Skip navigation link for keyboard accessibility */
 a.skipNav, a.skipNav:link, a.skipNav:visited {
 	position: absolute;
 	left: -9999px;
 	top: 0;
 	z-index: 1000;
 	padding: 8px 16px;
 	background: #003a72;
 	color: #fff;
 	font-size: 14px;
 	font-weight: bold;
 	font-family: Arial, Helvetica, sans-serif;
 	text-decoration: none;
 }
 
 a.skipNav:focus {
 	left: 0;
 	outline: 2px solid #fff;
 	outline-offset: -2px;
 }
 
 /* Contains all css needed for drop-down global navigation menus */
 
 
 /* FROM Jabico's style.css */
 /*  body.cgi {
 	margin:0px;
 	padding:0px;
  	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 */
 
 /******************************
  Global CSS for ALL menu types
 ******************************/
 
 ul.nice-menu,
 ul.nice-menu ul {
   list-style: none;
   padding: 0;
   margin: 0;
   border-top: 1px solid #ccc;
 }
 
 ul.nice-menu li {
   border: 1px solid #ccc;
   border-top: 0;
   float: left; /* LTR */
   background-color: #eee;
   line-height: normal;
 }
 
 ul.nice-menu a {
   padding: 0.3em 5px 0.3em 5px;
 }
 
 ul.nice-menu ul {
   top: 1.8em;
   left: -1px; /* LTR */
   border: 0;
   border-top: 1px solid #ccc;
   margin-right: 0; /* LTR */
 }
 
 ul.nice-menu ul li {
   min-width: 12.5em;
 }
 
 /******************************
  HORIZONTAL (down) menus
 ******************************/
 
 ul.nice-menu-down {
   float: left; /* LTR */
   border: 0;
 }
 
 ul.nice-menu-down li {
   border-top: 1px solid #ccc;
 }
 
 ul.nice-menu-down li li {
   border-top: 0;
 }
 
 ul.nice-menu-down ul {
   left: 0; /* LTR */
 }
 
 ul.nice-menu-down ul li {
   clear: both;
 }
 
 ul.nice-menu-down li ul li ul {
   left: 12.5em; /* LTR */
   top: -1px;
 }
 
 ul.nice-menu-down .menuparent a {
   padding-right: 10px; /* LTR */
 }
 
 ul.nice-menu-down li.menuparent {
   background: #eee;
 }
 
 ul.nice-menu-down li.menuparent:hover {
   background: #ccc;
 }
 
 ul.nice-menu-down li li.menuparent {
   background: #eee;
 }
 
 ul.nice-menu-down li li.menuparent:hover {
   background: #ccc;
 }
 
 #header-region ul.nice-menu-down li ul li ul {
   left: 12.5em; /* LTR */
   top: -1px;
 }
 
 #header-region ul.nice-menu-down li.menuparent {
   background: #eee;
 }
 
 #header-region ul.nice-menu-down li.menuparent:hover {
   background: #ccc;
 }
 
 #header-region ul.nice-menu-down li li.menuparent {
   background: #eee;
 }
 
 #header-region ul.nice-menu-down li li.menuparent:hover {
   background: #ccc;
 }
 
 /* nice_menus.css */
 
 /* Below should fix menu being a few pixels away in some themes, and menus disappearing behind other stuff. */
 .block-nice_menus {
   line-height: normal;
   z-index: 10;
 }
 
 ul.nice-menu,
 ul.nice-menu ul {
   z-index: 5;
   position: relative;
 }
 
 ul.nice-menu li {
   position: relative;
 }
 
 ul.nice-menu a {
   display: block;
 }
 
 ul.nice-menu ul,
 /* For Garland header. */
 #header-region ul.nice-menu ul {
   position: absolute;
   visibility: hidden;
 }
 
 ul.nice-menu li.over ul {
   visibility: visible;
 }
 
 ul.nice-menu ul li {
   display: block;
 }
 
 ul.nice-menu:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
 }
 
 /* Show submenus when over their parents. */
 ul.nice-menu li:hover ul,
 ul.nice-menu li.menuparent li:hover ul,
 ul.nice-menu li.menuparent li.menuparent li:hover ul,
 ul.nice-menu li.menuparent li.menuparent li.menuparent li:hover ul,
 ul.nice-menu li.over ul,
 ul.nice-menu li.menuparent li.over ul,
 ul.nice-menu li.menuparent li.menuparent li.over ul,
 ul.nice-menu li.menuparent li.menuparent li.menuparent li.over ul,
 /* Repeat all this stuff just for Garland headers. */
 #header-region ul.nice-menu li:hover ul,
 #header-region ul.nice-menu li.menuparent li:hover ul,
 #header-region ul.nice-menu li.menuparent li.menuparent li:hover ul,
 #header-region ul.nice-menu li.over ul,
 #header-region ul.nice-menu li.menuparent li.over ul,
 #header-region ul.nice-menu li.menuparent li.menuparent li.over ul {
   visibility: visible;
 }
 
 /* Hide sub-menus initially. */
 ul.nice-menu li:hover ul ul,
 ul.nice-menu li:hover ul ul ul,
 ul.nice-menu li:hover li:hover ul ul,
 ul.nice-menu li:hover li:hover ul ul ul,
 ul.nice-menu li:hover li:hover li:hover ul ul,
 ul.nice-menu li:hover li:hover li:hover ul ul ul,
 ul.nice-menu li.over ul ul,
 ul.nice-menu li.over ul ul ul,
 ul.nice-menu li.over li.over ul ul,
 ul.nice-menu li.over li.over ul ul ul,
 ul.nice-menu li.over li.over li.over ul ul,
 ul.nice-menu li.over li.over li.over ul ul ul,
 /* Repeat all this stuff just for Garland headers. */
 #header-region ul.nice-menu li:hover ul ul,
 #header-region ul.nice-menu li:hover ul ul ul,
 #header-region ul.nice-menu li:hover li:hover ul ul,
 #header-region ul.nice-menu li:hover li:hover ul ul ul,
 #header-region ul.nice-menu li:hover li:hover li:hover ul ul,
 #header-region ul.nice-menu li:hover li:hover li:hover ul ul ul,
 #header-region ul.nice-menu li.over ul ul,
 #header-region ul.nice-menu li.over ul ul ul,
 #header-region ul.nice-menu li.over li.over ul ul,
 #header-region ul.nice-menu li.over li.over ul ul ul,
 #header-region ul.nice-menu li.over li.over li.over ul ul,
 #header-region ul.nice-menu li.over li.over li.over ul ul ul {
   visibility: hidden;
 }
 
 /***************
  IE 6 Fixes
 ***************/
 
 /* Iframe to fix z-index bug when menu hovers over <select> fields. */
 ul.nice-menu li.menuparent ul,
 /* For Garland header. */
 #header-region ul.nice-menu li.menuparent ul {
 	overflow: visible !important;
 	/* overflow: hidden; */
 }
 
 ul.nice-menu li.menuparent ul iframe,
 /* For Garland header. */
 #header-region ul.nice-menu li.menuparent ul iframe {
 	display: none;
 	display/**/: block;
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: -1;
 	filter: mask();
 	width: 20px;
 	height: 20px;
 }
 
 
 /* START OF ORIGINAL nice_menu.css */
 
 ul.nice-menu {
 	z-index:100;
 }
 ul.nice-menu li, ul.nice-menu li.menuparent {
 	background:none;
 	border:none;
 }
 ul.nice-menu ul, ul.nice-menu li {
 	margin: 0;
 	padding: 0;
 }
 ul.nice-menu li {
 	padding-top:8px;
 	padding-left:11px;
 	padding-right:11px;
 }
 ul.nice-menu li.first {
 	padding-left:0px;
 }
 ul.nice-menu li.last {
 	padding-right:0px;
 }
 ul.nice-menu a {
 	display:block;
 	color:#f0f1f9;
 	/*color:#f0c156;*/
 	font-size:14px;
 	/*font-family:Metrophobic;*/
 	font-weight:lighter;
 	text-decoration:none;
 	/*padding:0px 5px 0px 15px;*/
 	padding:0px 10px 0px 3px;
 }
 ul.nice-menu li.menuparent{
 padding-top:8px;
 }
 
 ul.nice-menu li.menuparent span {
 	color:#f0f1f9;
 	font-size:14px;
 	cursor: pointer;
 	/*padding:0px 5px 0px 15px;*/
 	padding:0 18px 0 0;
 	/* background:url('../images/plusesign-main-menu.png') no-repeat 5px center; */
 }
 
 ul.nice-menu li.menuparent button {
 	color:#f0f1f9;
 	font-size:14px;
 	cursor: pointer;
 	padding:0 18px 0 0;
 	background: none;
 	border: none;
 	font-family: inherit;
 	line-height: inherit;
 }
 
 ul.nice-menu a:hover, ul.nice-menu a.active {
 	/* color:#f0f1f9; */
 }
 #main-menu ul li.menuparent ul li span {
 	color:#121e9b;
 	background:none;
 	padding:2px 10px 0px 3px;
 }
 
 ul.nice-menu ul {
 	position:absolute;
 	top:2.5em;
 	left:10px;
 	margin-right: 0;
 	border:2px solid #f5f5f5;
 	/*border-top:0px;*/
 	background:#fbfbfb;
 	-webkit-box-shadow: 0px 4px 5px rgba(160, 160, 160, 0.89);
     -moz-box-shadow:    0px 4px 5px rgba(160, 160, 160, 0.89);
     box-shadow:         0px 4px 5px rgba(60, 60, 60, 0.89);
 }
 ul.nice-menu ul li {
 	padding:0;
 	margin:0;
 	border:0px;
 	text-align:left;
 	min-width:200px;
 	white-space:nowrap;
 	background:#fbfbfb;
 	border-bottom:1px solid #ffffff;
 	/* old color => #fecc51; */
 }
 
 /* GREG ADDED STYLES FOR GLOBAL NAVIGATION BAR */ 
 /* for home link */
 span#home-link {
 	top: -2px;
 	position: relative;
 	text-indent: -9999px;
 	height: 18px;
 	width: 23px;
 	/* margin-right: 1px; */
 	display: inline-block;
 	background-image: url("../images/homeIconSprite.png");
 	background-position: 0 -18px;
 	background-color: #2636d1;
 }
 span#hgTracks-home-link {
 	top: -2px;
 	position: relative;
 	text-indent: -9999px;
 	height: 18px;
 	width: 23px;
 	/* margin-right: 1px; */
 	display: inline-block;
 	background-image: url("../images/hgTracksHomeIconSprite.png");
 	background-position: 0 -18px;
 	background-color: #00457c;
 }
 
 span#home-link:hover {
 	background-position: 0 0;
 }
 span#hgTracks-home-link:hover {
 	background-position: 0 0;
 }
 
 /* for dropdown menu highlighting on hover */
 ul.nice-menu ul li:hover, ul.nice-menu ul li:active {
     background-color: #327de4 !important;
     color: #fff !important;
 }
 /* END - GREG ADDED STYLES */ 
 
 /************************************/
 /* More styles for Nav Bar from UCSC */
 
 /* provide class to suppress highlighting on dropdown menu items (e.g. horiz rule) */
 ul.nice-menu ul .noHighlight:hover, ul.nice-menu ul li.noHighlight a:hover {
     color:#121e9b !important;
     background-color: #fff !important;
 }
 
 /* class for inactive (greyed out) dropdown menu items */
 ul.nice-menu ul li.inactive span {
     cursor: default !important;
     color:#CCCCCC !important;
     background-color: #fff !important;
     display:block;
     background:none;
     text-align:left;
     padding:8px !important;
     padding-top:5px !important;
     padding-bottom:5px !important;
     padding-right:0px;
     border:0px !important;
     min-width:180px;
     font-size:13px;
     font-weight:bold;
     font-family:Arial, Helvetica, sans-serif;
 }
 /************************************/
 
 ul.nice-menu ul li a {
 	padding:0;
 	margin:0;
 	color:#121e9b !important;
 	display:inline-block;
 	background:none;
 	text-align:left;
 	padding:8px;
 	padding-top:5px !important;
 	padding-bottom:5px !important;
 	padding-right:8px;
 	border:0px !important;
 	min-width:160px;
 	font-size:13px;
 	font-weight:bold;
 	font-family:Arial, Helvetica, sans-serif;
 }
 ul.nice-menu ul li span {
 }
 ul.nice-menu ul li a:hover, ul.nice-menu ul li a.active {
 	color:#fff !important;
 	background-color: #327de4 !important;
 }
 ul.nice-menu li.menuparent li a {
 	padding:8px;
 }
 
 ul.nice-menu-down li li.menuparent {
 	background:#ffffff;
 }
 ul.nice-menu-down li li.last {
 	border:none;
 }
 ul.nice-menu-down li.menuparent:hover, ul.nice-menu-down li.over, #header-region ul.nice-menu-down li.menuparent:hover, #header-region ul.nice-menu-down li.over {
 	background:none;
 }
 ul.nice-menu-down li li.over {
 	background:#ffffff;
 	color:#fff;
 }
 ul.nice-menu-down li li.menuparent:hover {
 	background:#ffffff;
 	color:#fff;
 }
 ul.nice-menu-down li li.menu-467:hover {
 	border:none !important;
 }
 ul.nice-menu-down li li.menuparent.active {
 	background:#ffffff;
 	color:#fff;
 }
 ul.nice-menu-down li ul li ul {
 	left:141px;
 	top:0px;
 }
 
 ul.nice-menu li.horizSep {
     height: 2px;
     background-color: #DDD;
 }
 
 ul.nice-menu li.horizSep:hover {
     height: 2px;
     background-color: #DDD !important;
 }
 
 /* a keyboard shortcut can be specified for a menu entry */
 #main-menu ul li.menuparent ul li span.shortcut {
     color : #bbbbbb;
     padding : 0;
 }
 
 
 /* over-riding HGStyle for demo */
 .blueToggleBar {
     background-color: #00457c;
     color: #FFFFFF;
     font-weight: bold;
     height: 28px;
     text-align: center;
     vertical-align: middle;
     white-space: nowrap;
     width: 100%;
     -webkit-border-top-left-radius: 3px;
     -webkit-border-top-right-radius: 3px;
     -moz-border-radius-topleft: 3px;
     -moz-border-radius-topright: 3px;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
 }
 
 th.blueToggleBar b { /* Win8/IE10 was not inheriting text color redmin 11745 */
     color: #FFFFFF;
 }
 
 a:link {color: #121E9A;}
 
 
 #imgTbl, #chrom {
     background-color: #fff;
     border: 1px solid #000;
     border-radius: 2px;
 }
 
 
 /* Keyboard focus indicators for accessibility */
 ul.nice-menu a:focus-visible,
 ul.nice-menu button:focus-visible {
 	outline: 2px solid #fff;
 	outline-offset: 2px;
 }
 
 ul.nice-menu ul a:focus-visible {
 	outline: 2px solid #327de4;
 	outline-offset: -2px;
 }
 
 /* Below are all the styles used by the superfish plugin
 I need SOME of these for the arrows in the dropdown menu. I'll
 end up deleting any I don't need */
 
 
 /* arrows */
 .sf-menu a.sf-with-ul {
 	padding-right: 	2.25em;
 	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
 }
 .sf-sub-indicator {
 	/*position:		absolute;
 	display:		block;
 	right:			.75em;
 	top:			1.05em;  // IE6 only 
 	width:			10px;
 	height:			10px;
 	text-indent: 	-999em;
 	overflow:		hidden; */
 	/* background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; 8-bit indexed alpha png. IE6 gets solid image only */
 }
 
 a > .sf-sub-indicator {  /* give all except IE6 the correct values */
 	/*top:			.8em; */
 	/* background-position: 0 -100px; /* use translucent arrow for modern browsers */
 }