feat: hide scrollbar, update overlay menu

MetaCubeX · Aug 30, 2023 · 9919cca · 9919cca
1 parent 7a32ec4
commit 9919cca
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -2,3 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 @tailwind variants;
+
+::-webkit-scrollbar {
+  display: none;
+}