From 9919cca00e4315d0efd4dc0e8dcba9287de79f9b Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Thu, 31 Aug 2023 02:06:26 +0800
Subject: [PATCH] feat: hide scrollbar, update overlay menu

---
 src/App.tsx                 | 2 +-
 src/components/Collpase.tsx | 2 +-
 src/components/Header.tsx   | 4 ++--
 src/index.css               | 4 ++++
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4ce1b3f2..1104523b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -27,7 +27,7 @@ export const App = () => {
     >
       <Header />
 
-      <div class="flex-1 overflow-y-auto p-4">
+      <div class="flex-1 overflow-y-auto overflow-x-hidden p-2 sm:p-4">
         <Routes>
           <Show when={selectedEndpoint()}>
             <Route path="/overview" component={Overview} />
diff --git a/src/components/Collpase.tsx b/src/components/Collpase.tsx
index 946fb3b3..55858ff5 100644
--- a/src/components/Collpase.tsx
+++ b/src/components/Collpase.tsx
@@ -19,7 +19,7 @@ const Collapse: ParentComponent<Props> = (props) => {
 
   const getCollapseContentClassName = () => {
     const openedClassName = 'opacity-100'
-    const closedClassName = 'opacity-0 scale-y-0'
+    const closedClassName = 'opacity-0'
     return props.isOpen ? openedClassName : closedClassName
   }
 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6c997edb..e0280aaa 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -46,7 +46,7 @@ const ThemeSwitcher = () => (
     <div class="drawer-side">
       <label for="themes" class="drawer-overlay" />
 
-      <ul class="menu rounded-box z-50 gap-2 bg-base-300 p-2 shadow">
+      <ul class="menu rounded-box gap-2 bg-base-300 p-2 shadow">
         <For each={themes}>
           {(theme) => (
             <li
@@ -120,7 +120,7 @@ export const Header = () => {
           <div class="drawer-side">
             <label for="navs" class="drawer-overlay" />
 
-            <ul class="menu rounded-box z-50 min-h-full w-2/5 gap-2 bg-base-300 p-2 shadow">
+            <ul class="menu rounded-box min-h-full w-2/5 gap-2 bg-base-300 pt-20 shadow">
               <For each={navs()}>
                 {({ href, name }) => (
                   <li>
diff --git a/src/index.css b/src/index.css
index 510ff1d5..e3bd6e4d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,3 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 @tailwind variants;
+
+::-webkit-scrollbar {
+  display: none;
+}