fix: fix mobile version on safari (#95)

* fix: fix mobile version on safari

* fix: fix logo backgrounds

* fix: fix logo background color on smaller screens

Author: shadowusr

src/scss/custom.scss

@@ -118,7 +118,7 @@ html[data-theme-override="light"] {
 }
 
 .docs-wrapper .navbar__items {
-    @apply bg-white dark:bg-neutral-950;
+    // @apply bg-white dark:bg-neutral-950;
 }
 
 .docs-wrapper .main-wrapper,
@@ -130,6 +130,13 @@ html[data-theme-override="light"] {
     padding: 0 2rem;
 }
 
+.plugin-pages {
+    .logo-container {
+        box-shadow: none;
+        background: none;
+    }
+}
+
 .navbar {
     transition: transform 0.25s ease-in-out;
     transform: translateY(0);
@@ -165,12 +172,20 @@ html[data-theme-override="light"] {
     .navbar-sidebar {
         @apply h-fit dark:bg-neutral-900;
 
+        .navbar-sidebar__brand {
+            @apply relative;
+        }
+
+        .navbar-sidebar__items {
+            height: auto;
+        }
+
         .navbar-sidebar__item.menu {
             padding: 10px 6px !important;
         }
 
         .color-mode-toggle {
-            @apply absolute top-[21px] right-6 h-fit;
+            @apply absolute top-1/2 right-6 -translate-1/2;
         }
 
         .menu__link--sublist::after {
@@ -258,7 +273,7 @@ html[data-theme-override="light"] {
             @apply m-0 h-8 w-8;
         }
         b {
-            @apply flex h-8 items-center rounded-lg px-2 font-mono hover:bg-neutral-100 dark:hover:bg-neutral-200/10;
+            @apply flex h-8 items-center rounded-lg px-2 font-mono font-semibold hover:bg-neutral-100 dark:hover:bg-neutral-200/10;
         }
     }
 }

src/theme/ColorModeToggle/styles.module.css

@@ -1,19 +1,19 @@
 @reference '../../scss/custom.scss';
 
 .toggle {
-    @apply flex h-8 w-8 justify-center rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-300/10;
+    @apply flex justify-center rounded-lg;
+    height: 21px;
+    width: 21px;
 }
 
 .toggleButton {
-    @apply h-4 w-4;
     align-items: center;
     display: flex;
     justify-content: center;
-    height: 100%;
     transition: background var(--ifm-transition-fast);
 }
 
 .toggleIcon {
-    width: 1.25rem;
-    height: 1.25rem;
+    width: 1rem;
+    height: 1rem;
 }

src/theme/Icon/Close/index.tsx

@@ -11,7 +11,6 @@ export default function IconClose({
     return (
         <Xmark
             className={className}
-            viewBox="0 0 15 15"
             width={width}
             height={height}
             {...restProps}

src/theme/Navbar/Logo/index.module.css

@@ -0,0 +1,3 @@
+.logo-container {
+    box-shadow: 0 0 18px 8px var(--tw-shadow-color);
+}

src/theme/Navbar/Logo/index.tsx

@@ -2,10 +2,18 @@ import React from "react";
 import TestplaneLogo from "@site/static/img/logo.svg";
 import TestplaneLogoDark from "@site/static/img/logo-dark.svg";
 import Link from "@docusaurus/Link";
+import clsx from "clsx";
+
+import styles from "./index.module.css";
 
 export default function NavbarLogo(): JSX.Element {
     return (
-        <div className="flex">
+        <div
+            className={clsx(
+                styles["logo-container"],
+                "logo-container flex lg:bg-white/70 lg:shadow-white/90 dark:lg:bg-neutral-950/70 dark:lg:shadow-neutral-950/90",
+            )}
+        >
             <TestplaneLogo className="h-8 w-8 dark:hidden" />
             <TestplaneLogoDark className="hidden h-8 w-8 dark:block" />
             <Link