feat: implemented mobile version of navbar

Author: berezinant

dokka-subprojects/plugin-base-frontend/src/main/components/assets/searchIcon.svg

@@ -6,11 +6,11 @@
 .filter-section {
   z-index: 0;
 
-  margin-right: var(--size-s3);
-
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+
+  margin-right: 12px;
   gap: 2px;
 
   @media (width <= $breakpoint-desktop-min) {

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/styles.scss

@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+@import 'tokens/index';
+
+.ui-kit_desktop-only {
+  @media (width < $breakpoint-desktop-min) {
+    display: none;
+  }
+}
+
+.ui-kit_mobile-only {
+  @media (width >= $breakpoint-desktop-min) {
+    display: none;
+  }
+}

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/helpers.scss

@@ -3,11 +3,11 @@
  */
 
 @import 'filter-section/styles';
+@import 'helpers';
 @import 'library-name/styles';
 @import 'library-version/styles';
 @import 'navbar/styles';
 @import 'navbar-button/styles';
 @import 'platform-tag/styles';
 @import 'platform-tags/styles';
 @import 'tabs/styles';
-@import 'toc-menu/styles';

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.scss

@@ -9,6 +9,6 @@ import * as navbarButton from './navbar-button/index';
 import * as platformTag from './platform-tag/index';
 import * as platformTags from './platform-tags/index';
 import * as tabs from './tabs/index';
-import * as tocMenu from './toc-menu/index';
+import './helpers.scss';
 
-export { filterSection, libraryName, libraryVersion, navbar, navbarButton, platformTag, platformTags, tabs, tocMenu };
+export { filterSection, libraryName, libraryVersion, navbar, navbarButton, platformTag, platformTags, tabs };

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts

@@ -14,11 +14,17 @@
 
   margin-right: var(--size-s2);
 
+  white-space: nowrap;
+
   color: var(--color-text-white);
 
   font: var(--font-h4);
 
-  white-space: nowrap;
+  @media (width <= $breakpoint-desktop-min) {
+    height: 52px;
+
+    margin-left: 12px;
+  }
 }
 
 .library-name--link::before {

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/styles.scss

@@ -8,4 +8,13 @@
   color: var(--color-text-white);
 
   font: var(--font-text-s);
+
+  @media (width <= $breakpoint-desktop-min) {
+    display: flex;
+    align-items: center;
+
+    height: 52px;
+
+    background-color: var(--color-text-black);
+  }
 }