web: new sidebar ui

Signed-off-by: 01zulfi <[email protected]>
streetwriters · Jan 7, 2025 · 5fbd4ac · 5fbd4ac
1 parent 71db854
commit 5fbd4ac
Show file tree

Hide file tree

Showing 14 changed files with 898 additions and 561 deletions.
diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
@@ -143,6 +143,11 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
   const isTablet = useTablet();
   const [isNarrow, setIsNarrow] = useState(isTablet || false);
   const navPane = useRef<SplitPaneImperativeHandle>(null);
+  const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
+
+  useEffect(() => {
+    AppEventManager.subscribe(AppEvents.toggleSideMenu, setIsSideMenuOpen);
+  });
 
   useEffect(() => {
     if (isTablet) navPane.current?.collapse(0);
@@ -171,6 +176,40 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
           overflow: "hidden"
         }}
       >
+        {isTablet && (
+          <Flex
+            sx={{
+              position: "absolute",
+              left: 0,
+              right: 0,
+              zIndex: 1000,
+              width: isSideMenuOpen ? "100%" : 0,
+              height: "100%",
+              background: "transparent",
+              transition: "0.15s width ease-out"
+            }}
+          >
+            <Box
+              sx={{
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                top: 0,
+                left: 0,
+                background: "rgba(0,0,0,0.5)"
+              }}
+              onClick={() => {
+                AppEventManager.publish(AppEvents.toggleSideMenu);
+              }}
+            />
+            <Flex sx={{ width: 300 }}>
+              <NavigationMenu
+                toggleNavigationContainer={() => {}}
+                isTablet={false}
+              />
+            </Flex>
+          </Flex>
+        )}
         <SplitPane
           className="global-split-pane"
           ref={navPane}
@@ -183,17 +222,17 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
           {isFocusMode ? null : (
             <Pane
               id="nav-pane"
-              initialSize={180}
+              initialSize={isTablet ? 0 : 250}
               className={`nav-pane`}
-              minSize={50}
-              snapSize={120}
-              maxSize={300}
+              minSize={isTablet ? 0 : 200}
+              // snapSize={200}
+              maxSize={isTablet ? 0 : 300}
             >
               <NavigationMenu
                 toggleNavigationContainer={(state) => {
                   setShow(state || !show);
                 }}
-                isTablet={isNarrow}
+                isTablet={false}
               />
             </Pane>
           )}
@@ -307,7 +346,7 @@ function MobileAppContents() {
           flexShrink: 0
         }}
       >
-        <NavigationMenu toggleNavigationContainer={() => { }} isTablet={false} />
+        <NavigationMenu toggleNavigationContainer={() => {}} isTablet={false} />
       </Flex>
       <Flex
         className="mobile-list-pane"