update mobile view and some bugs (#2836)

* Fix dark theme bugs: mobile TOC is visible on 1px and has white background, menu icon is black

* Refactoring css styles for header controls

* Change header responsive layout

* Change header responsive layout

* Fix scrollable columns for any header size

* Remove main content mobile spacing

* Change style for platform filters and labels

* Fix: add burger icon into dist

* Fix: long code token in mobile view

* Fix: color in filter selector

* Fix: long token in keyValue for desktop

* Fix: add spacing for iPad Mini

* Fix: dropdown for multiple versions

* update platform brand colors

* Fix: sample spacing, blockquote, playground initialize

* Safari fix outline for platform tags

* Fix non-js main content for better SEO

* Fix outline for safari browser

* Add consistent vertical spacing for header. It should normalize subpixel artifacts and centred content.

* Update manual for custom logo

* Add comment for playground

* Hide copy button for non-js user

* fix; use google fonts

* feat; change style for platform in platform-tags

* Revert Inter as defult font

* Add breaks for CONSTANTS

* incorrect non-js script position

* less specific selector for article links

1 files changed, 22 insertions, 18 deletions

diff --git a/plugins/base/src/main/resources/dokka/templates/includes/header.ftl b/plugins/base/src/main/resources/dokka/templates/includes/header.ftl
index 2ec4fd7c..d5c7a613 100644
--- a/plugins/base/src/main/resources/dokka/templates/includes/header.ftl
+++ b/plugins/base/src/main/resources/dokka/templates/includes/header.ftl
@@ -1,24 +1,28 @@
 <#import "source_set_selector.ftl" as source_set_selector>
 <#macro display>
-<div class="navigation-wrapper" id="navigation-wrapper">
-    <div id="leftToggler"><span class="icon-toggler"></span></div>
-    <div class="library-name">
-        <@template_cmd name="pathToRoot">
-            <a href="${pathToRoot}index.html">
-                <@template_cmd name="projectName">
-                    <span>${projectName}</span>
+<nav class="navigation" id="navigation-wrapper">
+    <div class="navigation--inner">
+        <div class="navigation-title">
+            <button class="menu-toggle" id="menu-toggle" type="button">toggle menu</button>
+            <div class="library-name">
+                <@template_cmd name="pathToRoot">
+                    <a class="library-name--link" href="${pathToRoot}index.html">
+                        <@template_cmd name="projectName">
+                            ${projectName}
+                        </@template_cmd>
+                    </a>
                 </@template_cmd>
-            </a>
-        </@template_cmd>
-    </div>
-    <div>
-        <#-- This can be handled by the versioning plugin -->
-        <@version/>
-    </div>
-    <div class="pull-right d-flex">
+            </div>
+            <div class="library-version">
+                <#-- This can be handled by the versioning plugin -->
+                <@version/>
+            </div>
+        </div>
         <@source_set_selector.display/>
-        <button id="theme-toggle-button"><span id="theme-toggle"></span></button>
-        <div id="searchBar"></div>
     </div>
-</div>
+    <div class="navigation-controls">
+        <button class="navigation-controls--btn navigation-controls--theme" id="theme-toggle-button" type="button">switch theme</button>
+        <div class="navigation-controls--btn navigation-controls--search" id="searchBar" role="button">search in API</div>
+    </div>
+</nav>
 </#macro>