From d654e94d0adca29956f344f9d61f823a1e8f1901 Mon Sep 17 00:00:00 2001
From: Der_Googler <54764558+DerGoogler@users.noreply.github.com>
Date: Wed, 15 May 2024 23:16:34 +0200
Subject: [PATCH] drawer

---
 Website/src/activitys/MainActivity.tsx      | 13 +++++++++++++
 Website/src/components/onsenui/Splitter.tsx |  2 ++
 Website/src/hooks/useTheme.tsx              |  1 +
 Website/src/typings/global.d.ts             |  1 +
 4 files changed, 17 insertions(+)

diff --git a/Website/src/activitys/MainActivity.tsx b/Website/src/activitys/MainActivity.tsx
index 39640c2a..455b1335 100644
--- a/Website/src/activitys/MainActivity.tsx
+++ b/Website/src/activitys/MainActivity.tsx
@@ -28,6 +28,7 @@ import UnverifiedHostActivity from "./UnverifiedHostActivity";
 import { useModFS } from "@Hooks/useModFS";
 import { SuFile } from "@Native/SuFile";
 import { LogcatActivity } from "./LogcatActivity";
+import { view } from "@Native/View";
 
 const getLocation = () => {
   if (window.location !== window.parent.location) {
@@ -284,6 +285,18 @@ const MainActivity = (): JSX.Element => {
       <Splitter>
         <Splitter.Side
           side="left"
+          sx={{
+            borderColor: theme.palette.menuoutline,
+            borderStyle: "solid",
+            borderLeft: "0px",
+            borderWidth: "1px",
+            borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
+            mt: `calc(${view.getWindowTopInsets() || 8}px + 0.5% - 2px)`,
+            mb: `calc(${view.getWindowBottomInsets() || 8}px + 0.5% - 2px)`,
+            ".page--material": {
+              borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
+            },
+          }}
           width={250}
           collapse={true}
           swipeable={false}
diff --git a/Website/src/components/onsenui/Splitter.tsx b/Website/src/components/onsenui/Splitter.tsx
index 3cfa9266..7359fbf4 100644
--- a/Website/src/components/onsenui/Splitter.tsx
+++ b/Website/src/components/onsenui/Splitter.tsx
@@ -1,4 +1,5 @@
 import onsCustomElement from "@Util/onsCustomElement";
+import { SxProps } from "@mui/material";
 import "onsenui/esm/elements/ons-splitter";
 import React from "react";
 
@@ -9,6 +10,7 @@ interface HTMLSplitter {
 interface HTMLSplitterContent {}
 
 interface HTMLSplitterSide {
+  sx?: SxProps;
   collapse?: boolean | "portrait" | "landscape";
   swipeable?: boolean;
   isOpen?: boolean;
diff --git a/Website/src/hooks/useTheme.tsx b/Website/src/hooks/useTheme.tsx
index 210a4ab2..6c6e6d96 100644
--- a/Website/src/hooks/useTheme.tsx
+++ b/Website/src/hooks/useTheme.tsx
@@ -216,6 +216,7 @@ const THIS_IS_THE_THEME_OBJECT_OF_THIS_F_APP = createTheme({
       secondary: "#777777",
     },
     divider: "#f3f5f726",
+    menuoutline: "#333638",
   },
 } as unknown as MMRLTheme);
 
diff --git a/Website/src/typings/global.d.ts b/Website/src/typings/global.d.ts
index 945a4310..51f39c08 100644
--- a/Website/src/typings/global.d.ts
+++ b/Website/src/typings/global.d.ts
@@ -92,6 +92,7 @@ declare global {
       primary?: {
         header?: string;
       };
+      menuoutline?: string;
       text?: {
         link?: string;
       };