enhance(mobile): reuse left sidebar style

src/main/frontend/components/container.cljs

@@ -444,7 +444,7 @@
      [close-signal])
 
     [:<>
-     [:div.left-sidebar-inner.flex-1.flex.flex-col.min-h-0
+     [:div.left-sidebar-inner.as-container.flex-1.flex.flex-col.min-h-0
       {:key "left-sidebar"
        :ref ref-el
        :style (cond-> {}

src/main/frontend/components/container.css

@@ -59,12 +59,14 @@
 }
 
 .left-sidebar-inner {
-  @apply relative h-full pt-3 overflow-y-auto overflow-x-hidden transition-transform;
-  @apply transform-gpu translate-x-[-100%] z-[3] antialiased;
+  &.as-container {
+    @apply relative h-full pt-3 overflow-y-auto overflow-x-hidden transition-transform;
+    @apply transform-gpu translate-x-[-100%] z-[3] antialiased;
 
-  width: var(--ls-left-sidebar-sm-width);
-  background-color: var(--left-sidebar-bg-color);
-  border-right: 1px solid var(--lx-gray-03, var(--ls-tertiary-background-color));
+    width: var(--ls-left-sidebar-sm-width);
+    background-color: var(--left-sidebar-bg-color);
+    border-right: 1px solid var(--lx-gray-03, var(--ls-tertiary-background-color));
+  }
 
   > .wrap {
     @apply flex flex-col relative w-full mt-6;

src/main/mobile/components/app.css

@@ -74,7 +74,7 @@ body {
 }
 
 ul {
-  @apply !list-disc ml-1 mt-2 list-inside;
+  @apply list-disc ml-1 mt-2 list-inside;
 
   li {
     @apply pl-0;
@@ -466,4 +466,16 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
       }
     }
   }
+}
+
+.left-sidebar-inner {
+  @apply -mx-4;
+
+  a {
+    @apply text-gray-12 dark:text-gray-11;
+
+    .page-title {
+      display: flex !important;
+    }
+  }
 }

src/main/mobile/components/left_sidebar.cljs

@@ -21,6 +21,7 @@
         {:class "flex flex-col items-center p-2"}
         (silkhq/sidebar-sheet-handle)
         [:div.w-full.app-silk-popup-content-inner.p-2
-         [:div.sidebar-contents-container.mt-8
-          (container/sidebar-favorites)
-          (container/sidebar-recent-pages)]]))))))
+         [:div.left-sidebar-inner
+          [:div.sidebar-contents-container.mt-8
+           (container/sidebar-favorites)
+           (container/sidebar-recent-pages)]]]))))))

tailwind.mobile.css

@@ -21,6 +21,7 @@
 @import "src/main/frontend/components/icon.css";
 @import "src/main/frontend/mobile/index.css";
 @import "src/main/frontend/components/theme.css";
+@import "src/main/frontend/components/container.css";
 @import "src/main/frontend/components/block.css";
 @import "src/main/frontend/components/property.css";
 @import "src/main/frontend/components/editor.css";