Add shell layout

src/renderer/layouts/default-layout.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
-import { Menu, Button } from '@mantine/core';
 import { motion } from 'framer-motion';
 import { Outlet } from 'react-router';
 import { SideQueue } from '@/renderer/features/side-queue/components/side-queue';
@@ -74,18 +73,22 @@ const ResizeHandle = styled.div<{
   bottom: ${(props) => props.placement === 'bottom' && 0};
   left: ${(props) => props.placement === 'left' && 0};
   z-index: 100;
-  width: 3px;
+  width: 2px;
   height: 100%;
   background-color: var(--sidebar-handle-bg);
   cursor: ew-resize;
   opacity: ${(props) => (props.isResizing ? 1 : 0)};
 
   &:hover {
-    opacity: 1;
+    opacity: 0.5;
   }
 `;
 
-export const DefaultLayout = () => {
+interface DefaultLayoutProps {
+  shell?: boolean;
+}
+
+export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
   const sidebar = useAppStore((state) => state.sidebar);
   const setSidebar = useAppStore((state) => state.setSidebar);
 
@@ -136,21 +139,14 @@ export const DefaultLayout = () => {
       <Layout>
         <TitlebarContainer>
           <Titlebar />
-          <Menu withinPortal>
-            <Menu.Target>
-              <Button />
-            </Menu.Target>
-            <Menu.Dropdown>
-              <Menu.Item>Hello</Menu.Item>
-              <Menu.Item>Hello</Menu.Item>
-            </Menu.Dropdown>
-          </Menu>
         </TitlebarContainer>
         <MainContainer
           leftSidebarWidth={sidebar.leftWidth}
           rightExpanded={sidebar.rightExpanded}
           rightSidebarWidth={sidebar.rightWidth}
         >
+          {!shell && (
+            <>
               <SidebarContainer>
                 <ResizeHandle
                   ref={sidebarRef}
@@ -182,6 +178,9 @@ export const DefaultLayout = () => {
                   <SideQueue />
                 </RightSidebarContainer>
               )}
+            </>
+          )}
+
           <Outlet />
         </MainContainer>
         <PlayerbarContainer>
@@ -191,3 +190,7 @@ export const DefaultLayout = () => {
     </>
   );
 };
+
+DefaultLayout.defaultProps = {
+  shell: false,
+};