feat(website): updated sidebar component and layout improvements

packages/website/package.json

@@ -121,7 +121,6 @@
     "styled-components": "^6.0.7",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
-    "usehooks-ts": "^3.1.0",
     "viem": "^2.21.15",
     "wagmi": "^2.5.13",
     "zod": "^3.23.8",

packages/website/src/components/CodePreview.tsx

@@ -23,8 +23,8 @@ const EditorStyles = createGlobalStyle`
 export const CodePreview: FC<ICodePreviewProps> = ({
   code,
   language,
-  height = '190px',
   line,
+  height,
   editorProps,
 }) => {
   const editorRef = useRef<any>(null);
@@ -62,7 +62,7 @@ export const CodePreview: FC<ICodePreviewProps> = ({
     <>
       <EditorStyles />
       <Editor
-        height={height}
+        height={height || '100%'}
         theme="vs-dark"
         defaultLanguage={language || 'javascript'}
         value={code}

packages/website/src/components/MainContentLoading.tsx

@@ -0,0 +1,15 @@
+import { CustomSpinner } from '@/components/CustomSpinner';
+
+/* {
+  hasSubheader,
+}: {
+  hasSubheader?: boolean;
+} */
+
+export default function MainContentLoading() {
+  return (
+    <div className={'h-screen w-screen flex justify-center items-center'}>
+      <CustomSpinner />
+    </div>
+  );
+}

packages/website/src/components/PageLoading.tsx

@@ -2,7 +2,7 @@ import { CustomSpinner } from '@/components/CustomSpinner';
 
 export default function PageLoading() {
   return (
-    <div className="flex min-h-screen w-full flex-col items-center justify-center">
+    <div className="h-screen w-screen flex items-center justify-center">
       <CustomSpinner />
     </div>
   );

packages/website/src/components/layouts/SidebarLayout.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { ReactNode, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Menu } from 'lucide-react';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from '@/components/ui/sidebar';
+import { useRouter } from 'next/router';
+
+const CloseOnLeave = () => {
+  const { setOpenMobile } = useSidebar();
+  const router = useRouter();
+  const fullPath = router.asPath;
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      setOpenMobile(false);
+    };
+
+    // Detect initial load and hash change
+    handleHashChange();
+
+    // Add listener for hash changes
+    window.addEventListener('hashchange', handleHashChange);
+
+    // Cleanup the listener on unmount
+    return () => {
+      window.removeEventListener('hashchange', handleHashChange);
+    };
+  }, [setOpenMobile, fullPath]);
+
+  return null;
+};
+
+interface SidebarLayoutProps {
+  children: ReactNode;
+  sidebarContent?: ReactNode;
+  centered?: boolean;
+  hasSubheader?: boolean;
+  fixedFooter?: boolean;
+  contentHeight?: string;
+  sidebarTop?: string;
+  mainContentOverflowY?: 'auto' | 'visible';
+  borderlessSidebar?: boolean;
+}
+
+export function SidebarLayout({
+  children,
+  sidebarContent,
+  centered = true,
+  hasSubheader = false,
+  fixedFooter = true,
+  contentHeight,
+  sidebarTop,
+  mainContentOverflowY = 'auto',
+  borderlessSidebar = false,
+}: SidebarLayoutProps) {
+  const headerVar = 'var(--header-height)';
+  const subheaderVar = hasSubheader ? 'var(--subheader-height)' : '0px';
+  const footerVar = fixedFooter ? 'var(--footer-height)' : '0px';
+
+  const sidebarStyles = {
+    top: sidebarTop ? sidebarTop : `calc(${headerVar} + ${subheaderVar})`,
+    height: contentHeight
+      ? contentHeight
+      : `calc(100vh - ${headerVar} - ${subheaderVar} - ${footerVar})`,
+  };
+
+  return (
+    <SidebarProvider>
+      <CloseOnLeave />
+      {/* Mobile Sidebar Trigger - Fixed to left side */}
+      {sidebarContent && (
+        <main className="fixed left-0 top-1/2 -translate-y-1/2 z-[50] md:hidden bg-black border border-border border-l-0 rounded-r-lg [&:has([data-state=open])]:hidden">
+          <SidebarTrigger>
+            <Button
+              size="icon"
+              className="h-8 w-8 rounded-r-lg rounded-l-none border-l-0"
+              aria-label="Toggle sidebar"
+            >
+              <Menu className="h-4 w-4" />
+            </Button>
+          </SidebarTrigger>
+        </main>
+      )}
+
+      {sidebarContent && (
+        <Sidebar
+          style={sidebarStyles}
+          className={`z-[100] sticky w-[280px] md:w-[280px] shrink-0 overflow-y-auto ${
+            borderlessSidebar ? 'border-none' : 'border-r border-border'
+          }`}
+        >
+          <SidebarContent
+            /* className={centered ? 'py-6 lg:py-8 bg-black' : 'overflow-y-auto'} */
+            className={centered ? 'bg-black' : ''}
+          >
+            {sidebarContent}
+          </SidebarContent>
+        </Sidebar>
+      )}
+
+      {/* Main content */}
+      <main
+        className={`cannon-page-main-content overflow-y-${mainContentOverflowY} flex-1 h-[${
+          contentHeight ? contentHeight : 'auto'
+        }]`}
+      >
+        {/* container p-4 md:px-6 lg:px-8 ml-0 */}
+        <div className="h-full w-full">{children}</div>
+      </main>
+    </SidebarProvider>
+  );
+}

packages/website/src/components/ui/sidebar.tsx

@@ -3,7 +3,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { VariantProps, cva } from 'class-variance-authority';
 import { PanelLeft } from 'lucide-react';
 
-import { useIsMobile } from '@/hooks/use-mobile';
+import { useIsMobile } from '@/hooks/useMedia';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -139,7 +139,7 @@ const SidebarProvider = React.forwardRef<
               } as React.CSSProperties
             }
             className={cn(
-              'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
+              'group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar',
               className
             )}
             ref={ref}
@@ -222,7 +222,7 @@ const Sidebar = React.forwardRef<
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={cn(
-            'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
+            'duration-200 relative bg-transparent transition-[width] ease-linear',
             'group-data-[collapsible=offcanvas]:w-0',
             'group-data-[side=right]:rotate-180',
             variant === 'floating' || variant === 'inset'
@@ -232,7 +232,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
+            'flex duration-200 inset-y-0 z-10 hidden w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
             side === 'left'
               ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
               : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',

packages/website/src/features/Deploy/WithSafe.tsx

@@ -4,7 +4,7 @@ import { useAccount, useBytecode } from 'wagmi';
 import PrepareNetwork from './PrepareNetwork';
 import * as onchainStore from '../../helpers/onchain-store';
 import * as multicallForwarder from '../../helpers/trusted-multicall-forwarder';
-import { Loader2 } from 'lucide-react'; // for spinner
+import MainContentLoading from '@/components/MainContentLoading';
 
 export default function WithSafe({ children }: { children: ReactNode }) {
   const currentSafe = useStore((s) => s.currentSafe);
@@ -39,9 +39,7 @@ export default function WithSafe({ children }: { children: ReactNode }) {
     <div className="flex flex-col flex-1">
       {currentSafe ? (
         isLoadingNetworkPrepared ? (
-          <div className="m-auto">
-            <Loader2 className="h-8 w-8 animate-spin" />
-          </div>
+          <MainContentLoading />
         ) : isNetworkPrepared ? (
           children
         ) : (
@@ -57,6 +55,7 @@ export default function WithSafe({ children }: { children: ReactNode }) {
               rel="noopener noreferrer"
               className="inline-block mx-2 text-gray-200 no-underline hover:no-underline translate-y-[3px] opacity-80"
             >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 className="h-[18px] object-cover"
                 src="/images/safe.svg"