From 6cd4d15245ba34b94b1268b06800acb867486caf Mon Sep 17 00:00:00 2001
From: Laurent Destailleur <eldy@destailleur.fr>
Date: Thu, 20 Feb 2020 17:05:28 +0100
Subject: [PATCH] Debug the new bookmark in top menu + support for MD theme

---
 htdocs/bookmarks/bookmarks.lib.php | 176 ++-----------
 htdocs/main.inc.php                |  17 +-
 htdocs/theme/eldy/dropdown.inc.php |   5 +
 htdocs/theme/md/dropdown.inc.php   | 395 ++++++++++++++++++++++++++++-
 htdocs/theme/md/style.css.php      |  38 +--
 5 files changed, 437 insertions(+), 194 deletions(-)

diff --git a/htdocs/bookmarks/bookmarks.lib.php b/htdocs/bookmarks/bookmarks.lib.php
index 8d772bf5b33..6bb4b243aff 100644
--- a/htdocs/bookmarks/bookmarks.lib.php
+++ b/htdocs/bookmarks/bookmarks.lib.php
@@ -21,132 +21,6 @@
  *	\brief      File with library for bookmark module
  */
 
-/**
- * Add area with bookmarks in menu
- *
- * @return	string
- */
-function printBookmarksList()
-{
-	global $conf, $user, $db, $langs;
-
-	$ret = '<div class="menu_top"></div>'."\n";
-
-	if (! empty($conf->use_javascript_ajax)) {		// Bookmark autosubmit can't work when javascript is off.
-		require_once DOL_DOCUMENT_ROOT.'/bookmarks/class/bookmark.class.php';
-		if (! isset($conf->global->BOOKMARKS_SHOW_IN_MENU)) $conf->global->BOOKMARKS_SHOW_IN_MENU=5;
-
-		$langs->load("bookmarks");
-
-		$url= $_SERVER["PHP_SELF"];
-
-		if (! empty($_SERVER["QUERY_STRING"]))
-		{
-		    $url.=(dol_escape_htmltag($_SERVER["QUERY_STRING"])?'?'.dol_escape_htmltag($_SERVER["QUERY_STRING"]):'');
-		}
-		else
-		{
-		    global $sortfield,$sortorder;
-		    $tmpurl='';
-		    // No urlencode, all param $url will be urlencoded later
-		    if ($sortfield) $tmpurl.=($tmpurl?'&':'').'sortfield='.$sortfield;
-		    if ($sortorder) $tmpurl.=($tmpurl?'&':'').'sortorder='.$sortorder;
-		    if (is_array($_POST))
-		    {
-	    	    foreach($_POST as $key => $val)
-	    	    {
-	                if (preg_match('/^search_/', $key) && $val != '') $tmpurl.=($tmpurl?'&':'').$key.'='.$val;
-	    	    }
-		    }
-		    $url.=($tmpurl?'?'.$tmpurl:'');
-		}
-
-		// Menu bookmark
-		$ret = '<div class="menu_top"></div>'."\n";
-
-		$ret.= '<!-- form with POST method by default, will be replaced with GET for external link by js -->'."\n";
-		$ret.= '<form id="actionbookmark" name="actionbookmark" method="POST" action="">';
-        $ret.= '<input type="hidden" name="token" value="'.newToken().'">';
-		$ret.= '<select name="bookmark" id="boxbookmark" class="flat boxcombo vmenusearchselectcombo" alt="Bookmarks">';
-		$ret.= '<option hidden value="listbookmarks" class="optiongrey" selected rel="'.DOL_URL_ROOT.'/bookmarks/list.php">'.$langs->trans('Bookmarks').'</option>';
-	    $ret.= '<option value="listbookmark" class="optionblue" rel="'.dol_escape_htmltag(DOL_URL_ROOT.'/bookmarks/list.php').'" ';
-	    $ret.= ' data-html="'.dol_escape_htmltag(img_picto('', 'bookmark').' '.($user->rights->bookmark->creer ? $langs->trans('EditBookmarks') : $langs->trans('ListOfBookmarks')).'...').'">';
-	    $ret.= dol_escape_htmltag($user->rights->bookmark->creer ? $langs->trans('EditBookmarks') : $langs->trans('ListOfBookmarks')).'...</option>';
-		// Url to go on create new bookmark page
-		if (! empty($user->rights->bookmark->creer))
-		{
-	    	//$urltoadd=DOL_URL_ROOT.'/bookmarks/card.php?action=create&amp;urlsource='.urlencode($url).'&amp;url='.urlencode($url);
-		    $urltoadd=DOL_URL_ROOT.'/bookmarks/card.php?action=create&amp;url='.urlencode($url);
-	    	$ret.= '<option value="newbookmark" class="optionblue" rel="'.dol_escape_htmltag($urltoadd).'"';
-	    	$ret.= ' data-html="'.dol_escape_htmltag(img_picto('', 'bookmark').' '.$langs->trans('AddThisPageToBookmarks').'...').'">'.dol_escape_htmltag($langs->trans('AddThisPageToBookmarks').'...').'</option>';
-		}
-		// Menu with all bookmarks
-		if (! empty($conf->global->BOOKMARKS_SHOW_IN_MENU))
-		{
-			$sql = "SELECT rowid, title, url, target FROM ".MAIN_DB_PREFIX."bookmark";
-			$sql.= " WHERE (fk_user = ".$user->id." OR fk_user is NULL OR fk_user = 0)";
-	        $sql.= " AND entity IN (".getEntity('bookmarks').")";
-			$sql.= " ORDER BY position";
-			if ($resql = $db->query($sql) )
-			{
-				$i=0;
-				while ($i < $conf->global->BOOKMARKS_SHOW_IN_MENU && $obj = $db->fetch_object($resql))
-				{
-				    $ret.='<option name="bookmark'.$obj->rowid.'" value="'.$obj->rowid.'" '.($obj->target == 1?' target="_blank"':'').' rel="'.dol_escape_htmltag($obj->url).'"';
-				    //$ret.=' data-html="'.dol_escape_htmltag('<span class="fa fa-print"></span> '.$obj->title).'"';
-				    $ret.='>';
-				    $ret.=dol_escape_htmltag($obj->title);
-				    $ret.='</option>';
-					$i++;
-				}
-			}
-			else
-			{
-				dol_print_error($db);
-			}
-		}
-
-		$ret.= '</select>';
-		$ret.= '</form>';
-
-		$ret.=ajax_combobox('boxbookmark');
-
-		$ret.='<script>
-	        	$(document).ready(function () {';
-		$ret.='    jQuery("#boxbookmark").change(function() {
-		            var urlselected = jQuery("#boxbookmark option:selected").attr("rel");
-					if (! urlselected) console.log("Error, failed to get the URL to jump to from the rel attribute");
-		            var urltarget = jQuery("#boxbookmark option:selected").attr("target");
-		            if (! urltarget) { urltarget=""; }
-	                jQuery("form#actionbookmark").attr("target",urltarget);
-		            jQuery("form#actionbookmark").attr("action",urlselected);
-
-		            console.log("We change select bookmark. We choose urlselected="+urlselected+" with target="+urltarget);
-
-		            // Method is POST for internal link, GET for external
-		            if (urlselected.startsWith(\'http\'))
-		            {
-		                var newmethod=\'GET\';
-		                jQuery("form#actionbookmark").attr("method", newmethod);
-		                console.log("We change method to newmethod="+newmethod);
-			            jQuery("#actionbookmark").submit();
-		                console.log("We restore method to POST");
-						jQuery("form#actionbookmark").attr("method", \'POST\');
-					}
-					else
-					{
-		            	jQuery("#actionbookmark").submit();
-					}
-		       });';
-		$ret.='})</script>';
-	}
-
-	$ret.= '<div class="menu_end"></div>'."\n";
-
-	return $ret;
-}
-
-
 
 /**
  * Add area with bookmarks in top menu
@@ -158,7 +32,6 @@ function printDropdownBookmarksList()
     global $conf, $user, $db, $langs;
 
     require_once DOL_DOCUMENT_ROOT.'/bookmarks/class/bookmark.class.php';
-    if (! isset($conf->global->BOOKMARKS_SHOW_IN_MENU)) $conf->global->BOOKMARKS_SHOW_IN_MENU=5;
 
     $langs->load("bookmarks");
 
@@ -204,42 +77,35 @@ function printDropdownBookmarksList()
         $newbtn.= img_picto('', 'bookmark').' '.dol_escape_htmltag($langs->trans('AddThisPageToBookmarks')).'</a>';
     }
 
-
     $bookmarkList='<div id="dropdown-bookmarks-list" >';
-    // Menu with all bookmarks
-    if (! empty($conf->global->BOOKMARKS_SHOW_IN_MENU))
+    // Menu with list of bookmarks
+    $sql = "SELECT rowid, title, url, target FROM ".MAIN_DB_PREFIX."bookmark";
+    $sql.= " WHERE (fk_user = ".$user->id." OR fk_user is NULL OR fk_user = 0)";
+    $sql.= " AND entity IN (".getEntity('bookmarks').")";
+    $sql.= " ORDER BY position";
+    if ($resql = $db->query($sql) )
     {
-        $sql = "SELECT rowid, title, url, target FROM ".MAIN_DB_PREFIX."bookmark";
-        $sql.= " WHERE (fk_user = ".$user->id." OR fk_user is NULL OR fk_user = 0)";
-        $sql.= " AND entity IN (".getEntity('bookmarks').")";
-        $sql.= " ORDER BY position";
-        if ($resql = $db->query($sql) )
-        {
-            $i=0;
-            while ($i < $conf->global->BOOKMARKS_SHOW_IN_MENU && $obj = $db->fetch_object($resql))
-            {
-                $bookmarkList.='<a class="dropdown-item bookmark-item" id="bookmark-item-'.$obj->rowid.'" data-id="'.$obj->rowid.'" '.($obj->target == 1?' target="_blank"':'').' href="'.dol_escape_htmltag($obj->url).'" >';
-                $bookmarkList.= dol_escape_htmltag($obj->title);
-                $bookmarkList.='</a>';
-                $i++;
-            }
-        }
-        else
-        {
-            dol_print_error($db);
-        }
+    	$i=0;
+    	while (($conf->global->BOOKMARKS_SHOW_IN_MENU == 0 || $i < $conf->global->BOOKMARKS_SHOW_IN_MENU) && $obj = $db->fetch_object($resql))
+    	{
+    		$bookmarkList.='<a class="dropdown-item bookmark-item" id="bookmark-item-'.$obj->rowid.'" data-id="'.$obj->rowid.'" '.($obj->target == 1?' target="_blank"':'').' href="'.dol_escape_htmltag($obj->url).'" >';
+    		$bookmarkList.= dol_escape_htmltag($obj->title);
+    		$bookmarkList.='</a>';
+    		$i++;
+    	}
+    }
+    else
+    {
+    	dol_print_error($db);
     }
     $bookmarkList.='</div>';
 
-    $html= '';
-    if (! empty($conf->global->BOOKMARKS_SHOW_IN_MENU)) {
-        $html.= '
+    $html = '
         <!-- search input -->
         <div class="dropdown-header bookmark-header">
             ' . $searchForm . '
         </div>
         ';
-    }
 
     $html.= '
         <!-- Menu Body -->
@@ -256,8 +122,7 @@ function printDropdownBookmarksList()
         </div>
     ';
 
-    if (! empty($conf->global->BOOKMARKS_SHOW_IN_MENU)) {
-        $html .= '<script>
+    $html .= '<script>
             $( document ).on("keyup", "#top-bookmark-search-input", function () {
 
                 var filter = $(this).val(), count = 0;
@@ -273,7 +138,6 @@ function printDropdownBookmarksList()
                 $("#top-bookmark-search-filter-count").text(count);
             });
 		    </script>';
-    }
 
     return $html;
 }
diff --git a/htdocs/main.inc.php b/htdocs/main.inc.php
index 42cb6587eee..cb95d143b97 100644
--- a/htdocs/main.inc.php
+++ b/htdocs/main.inc.php
@@ -1940,7 +1940,7 @@ function top_menu_bookmark()
         $langs->load("bookmarks");
 
         $html .= '<!-- div for bookmark link -->
-        <div id="topmenu-bookmark-dropdown" class="atoplogin dropdown inline-block">
+        <div id="topmenu-bookmark-dropdown" class="dropdown inline-block">
             <a class="dropdown-toggle login-dropdown-a" data-toggle="dropdown" href="#" title="'.$langs->trans('Bookmarks').' ('.$langs->trans('BookmarksMenuShortCut').')">
                 <i class="fa fa-star" ></i>
             </a>
@@ -1949,21 +1949,21 @@ function top_menu_bookmark()
             </div>
         </div>';
 
-
-
         $html .= '
         <!-- Code to show/hide the user drop-down -->
         <script>
         $( document ).ready(function() {
             $(document).on("click", function(event) {
                 if (!$(event.target).closest("#topmenu-bookmark-dropdown").length) {
+					console.log("close");
                     // Hide the menus.
                     $("#topmenu-bookmark-dropdown").removeClass("open");
                 }
             });
 
             $("#topmenu-bookmark-dropdown .dropdown-toggle").on("click", function(event) {
-                openBookMarkDropDown();
+				console.log("toggle");
+				openBookMarkDropDown();
             });
 
             // Key map shortcut
@@ -2188,15 +2188,6 @@ function left_menu($menu_array_before, $helppagename = '', $notused = '', $menu_
             }
         }
 
-		// Define $bookmarks
-		if (!empty($conf->bookmark->enabled) && $user->rights->bookmark->lire && empty($conf->global->MAIN_USE_TOP_MENU_BOOKMARK_DROPDOWN))
-		{
-			include_once DOL_DOCUMENT_ROOT.'/bookmarks/bookmarks.lib.php';
-			$langs->load("bookmarks");
-
-			$bookmarks = printBookmarksList();
-		}
-
 		// Left column
 		print '<!-- Begin left menu -->'."\n";
 
diff --git a/htdocs/theme/eldy/dropdown.inc.php b/htdocs/theme/eldy/dropdown.inc.php
index 63b7a268440..1a87ee39deb 100644
--- a/htdocs/theme/eldy/dropdown.inc.php
+++ b/htdocs/theme/eldy/dropdown.inc.php
@@ -219,6 +219,11 @@ a.top-menu-dropdown-link {
     max-height: calc(90vh - 110px) ;
 	white-space: normal;
 }
+#topmenu-bookmark-dropdown .dropdown-menu > .bookmark-body, #topmenu-bookmark-dropdown .dropdown-body{
+    max-height: 60vh ; /* fallback for browsers without support for calc() */
+    max-height: calc(90vh - 200px) ;
+}
+
 
 .dropdown-body::-webkit-scrollbar {
         width: 8px;
diff --git a/htdocs/theme/md/dropdown.inc.php b/htdocs/theme/md/dropdown.inc.php
index 8d38df188f3..78a322ed0e6 100644
--- a/htdocs/theme/md/dropdown.inc.php
+++ b/htdocs/theme/md/dropdown.inc.php
@@ -1,18 +1,395 @@
 <?php
 if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
 
+/* <style type="text/css" > dont remove this line it's an ide hack */
 /*
- * Dropdown
+ * Dropdown of user popup
  */
 
-/* Not supported yet by this theme */
 
-#dropdown-icon-up, #dropdown-icon-down, .login-dropdown-btn {
-	display: none !important;
+a.login-dropdown-a {
+	color: #fff;
+}
+div#topmenu-bookmark-dropdown {
+    position: fixed;
+    right: 20px;
+    top: 0px;
 }
 
-/* Disable the hover underline on the login */
-a.login-dropdown-a:hover, a.login-dropdown-a span:hover {
-	text-decoration: none !important;
-	cursor: default;
-}
\ No newline at end of file
+
+
+
+button.dropdown-item.global-search-item {
+    outline: none;
+}
+
+.open>.dropdown-search, .open>.dropdown-bookmark, .open>.dropdown-menu{
+    display: block;
+}
+
+.dropdown-search {
+    border-color: #eee;
+
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+.dropdown-bookmark {
+    border-color: #eee;
+
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+.dropdown-menu {
+    border-color: #eee;
+
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+
+
+.dropdown-toggle{
+    text-decoration: none !important;
+}
+
+.dropdown-toggle::after {
+    /* font part */
+    font-family: "Font Awesome 5 Free";
+    font-size: 0.7em;
+    font-weight: 900;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    text-align:center;
+    text-decoration:none;
+    margin:  auto 3px;
+    display: inline-block;
+    content: "\f078";
+
+    -webkit-transition: -webkit-transform .2s ease-in-out;
+    -ms-transition: -ms-transform .2s ease-in-out;
+    transition: transform .2s ease-in-out;
+}
+
+.open>.dropdown-toggle::after {
+    transform: rotate(180deg);
+}
+
+/*
+* MENU Dropdown
+*/
+.login_block.usedropdown .logout-btn{
+    display: none;
+}
+
+.tmenu .open.dropdown, .tmenu .open.dropdown {
+    background: rgba(0, 0, 0, 0.1);
+}
+.tmenu .dropdown-menu, .login_block .dropdown-menu {
+    position: absolute;
+    right: 0;
+    <?php echo $left; ?>: auto;
+    line-height:1.3em;
+}
+.tmenu .dropdown-menu, .login_block  .dropdown-menu .user-body {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+.user-body {
+    color: #333;
+}
+.side-nav-vert .user-menu .dropdown-menu {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    padding: 1px 0 0 0;
+    border-top-width: 0;
+    width: 300px;
+}
+.side-nav-vert .user-menu .dropdown-menu {
+    margin-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.side-nav-vert .user-menu .dropdown-menu > .user-header {
+    min-height: 100px;
+    padding: 10px;
+    text-align: center;
+    white-space: normal;
+}
+
+#topmenu-global-search-dropdown .dropdown-menu{
+    width: 300px;
+    max-width: 100%;
+}
+
+div#topmenu-global-search-dropdown, div#topmenu-bookmark-dropdown {
+    line-height: 46px;
+}
+a.top-menu-dropdown-link {
+    padding: 8px;
+}
+
+.dropdown-user-image {
+    border-radius: 50%;
+    vertical-align: middle;
+    z-index: 5;
+    height: 90px;
+    width: 90px;
+    border: 3px solid;
+    border-color: transparent;
+    border-color: rgba(255, 255, 255, 0.2);
+    max-width: 100%;
+    max-height :100%;
+}
+
+.dropdown-menu > .user-header{
+    background: rgb(<?php echo $colorbackhmenu1 ?>);
+}
+
+
+
+.dropdown-menu .dropdown-header{
+    padding: 5px 10px 10px 10px;
+}
+
+.dropdown-menu > .user-footer {
+    background-color: #f9f9f9;
+    padding: 10px;
+}
+
+.user-footer:after {
+    clear: both;
+}
+
+
+.dropdown-menu > .bookmark-footer{
+    padding: 10px;
+}
+
+
+.dropdown-menu > .user-body, .dropdown-body{
+    padding: 15px;
+    border-bottom: 1px solid #f4f4f4;
+    border-top: 1px solid #dddddd;
+    white-space: normal;
+}
+
+.dropdown-menu > .bookmark-body, .dropdown-body{
+    padding: 10px 0;
+    overflow-y: auto;
+    max-height: 60vh ; /* fallback for browsers without support for calc() */
+    max-height: calc(90vh - 110px) ;
+	white-space: normal;
+}
+#topmenu-bookmark-dropdown .dropdown-menu > .bookmark-body, #topmenu-bookmark-dropdown .dropdown-body{
+    max-height: 60vh ; /* fallback for browsers without support for calc() */
+    max-height: calc(90vh - 200px) ;
+}
+
+
+.dropdown-body::-webkit-scrollbar {
+        width: 8px;
+    }
+.dropdown-body::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    /* background: rgb(<?php echo $colorbackhmenu1 ?>); */
+    background: #aaa;
+}
+.dropdown-body::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+
+#topmenu-login-dropdown, #topmenu-bookmark-dropdown, #topmenu-global-search-dropdown {
+    padding: 0 5px 0 5px;
+}
+#topmenu-login-dropdown a:hover{
+    text-decoration: none;
+}
+
+#topmenuloginmoreinfo-btn{
+    display: block;
+    text-aling: right;
+    color:#666;
+    cursor: pointer;
+}
+
+#topmenuloginmoreinfo{
+    display: none;
+    clear: both;
+    font-size: 0.95em;
+}
+
+.button-top-menu-dropdown {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+
+.user-footer .button-top-menu-dropdown {
+    color: #666666;
+    border-radius: 0;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    border-width: 1px;
+    background-color: #f4f4f4;
+    border-color: #ddd;
+}
+
+.dropdown-menu a.top-menu-dropdown-link {
+    color: rgb(<?php print $colortextlink; ?>) !important;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    display: block;
+    margin: 5px 0px;
+}
+
+.dropdown-item {
+    display: block !important;
+    box-sizing: border-box;
+    width: 100%;
+    padding: .25rem 1.5rem .25rem 1rem;
+    clear: both;
+    font-weight: 400;
+    color: #212529  !important;
+    text-align: inherit;
+    background-color: transparent;
+    border: 0;
+
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}
+
+.dropdown-item::before {
+    /* font part */
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    text-align:center;
+    text-decoration:none;
+    margin-right: 5px;
+    display: inline-block;
+    content: "\f0da";
+    color: rgba(0,0,0,0.3);
+}
+
+
+.dropdown-item.active, .dropdown-item:hover, .dropdown-item:focus  {
+    color: #<?php echo $colortextbackhmenu; ?> !important;
+    text-decoration: none;
+    background: rgb(<?php echo $colorbackhmenu1 ?>);
+}
+
+/*
+* SEARCH
+*/
+
+.dropdown-search-input {
+    width: 100%;
+    padding: 10px 35px 10px 20px;
+
+    background-color: transparent;
+    font-size: 14px;
+    line-height: 16px;
+    box-sizing: border-box;
+
+
+    color: #575756;
+    background-color: transparent;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+    background-position: 95% center;
+    border-radius: 50px;
+    border: 1px solid #c4c4c2 !important;
+    transition: all 250ms ease-in-out;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+
+}
+
+.dropdown-search-input::placeholder {
+    color: color(#575756 a(0.8));
+    letter-spacing: 1.5px;
+}
+
+.hidden-search-result{
+    display: none !important;
+}
diff --git a/htdocs/theme/md/style.css.php b/htdocs/theme/md/style.css.php
index 596d35b5f3e..049eb0e88ba 100644
--- a/htdocs/theme/md/style.css.php
+++ b/htdocs/theme/md/style.css.php
@@ -1841,6 +1841,8 @@ ul.tmenu {	/* t r b l */
     margin: 0px 0px 0px 0px;
 	list-style: none;
 	display: table;
+    margin-right: 65px;		/* to keep space for bookmark */
+    padding-left: 5px;
 }
 ul.tmenu li {
 	background: rgb(<?php echo $colorbackhmenu1 ?>);
@@ -6163,22 +6165,6 @@ border-top-right-radius: 6px;
 
 
 
-/* This must be at end */
-::-webkit-scrollbar {
-    width: 12px;
-}
-::-webkit-scrollbar-button {
-    background: #aaa;
-}
-::-webkit-scrollbar-track-piece {
-    background: #fff;
-}
-::-webkit-scrollbar-thumb {
-    background: #ddd;
-}​
-
-
-
 <?php
 include dol_buildpath($path.'/theme/'.$theme.'/dropdown.inc.php', 0);
 include dol_buildpath($path.'/theme/'.$theme.'/info-box.inc.php', 0);
@@ -6188,3 +6174,23 @@ include dol_buildpath($path.'/theme/eldy/timeline.inc.php', 0); // actually md u
 if (!empty($conf->global->THEME_CUSTOM_CSS)) print $conf->global->THEME_CUSTOM_CSS;
 
 if (is_object($db)) $db->close();
+?>
+
+/* This must be at end */
+::-webkit-scrollbar {
+	width: 12px;
+}
+::-webkit-scrollbar-button {
+	background: #aaa;
+}
+::-webkit-scrollbar-track-piece {
+	background: #fff;
+}
+::-webkit-scrollbar-thumb {
+	background: #ddd;
+}​
+
+div#topmenu-bookmark-dropdown {
+position: fixed;
+right: 20px;
+}