update layouts

apps/admin/src/app/layouts/07__AdvancedMegaMenu/layout.tsx

@@ -1,94 +1,38 @@
 // DEMO 7
 // https://keenthemes.com/metronic/tailwind/react/demo7
 
-import { addDays, format } from 'date-fns';
-import { CalendarDays, Download } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { DateRange } from 'react-day-picker';
-import { Link, Outlet, useLocation } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import { useBodyClass } from '@crux-kit/hooks';
 import { LayoutNames } from '#app/config/types';
-import { useSettings } from '#app/providers/SettingsProvider';
-import { Button } from '#shared/ui/Button';
-import { Calendar } from '#shared/ui/Calendar';
-import { Popover, PopoverContent, PopoverTrigger } from '#shared/ui/Popover';
-import { Footer } from './components/Footer';
+import { AppFooter, Toolbar, ToolbarHeading, useLayoutChrome, useLayoutSettings } from '../shared';
 import { Header } from './components/Header';
-import { Toolbar, ToolbarActions, ToolbarHeading } from './components/Toolbar';
 
 export const AdvancedMegaMenuLayout = () => {
-  const { setOption } = useSettings();
-  const { pathname } = useLocation();
+  useLayoutSettings(LayoutNames.ADVANCE_MEGA_MENU);
+  const { showToolbar, showFooter } = useLayoutChrome();
 
-  const [date, setDate] = useState<DateRange | undefined>({
-    from: new Date(2025, 0, 20),
-    to: addDays(new Date(2025, 0, 20), 20)
-  });
-
-  // Using the custom hook to set multiple CSS variables and class properties
   useBodyClass(`
     [--header-height-default:95px]
     data-[sticky-header=on]:[--header-height:60px]
-    [--header-height:var(--header-height-default)]	
-    [--header-height-mobile:70px]	
+    [--header-height:var(--header-height-default)]
+    [--header-height-mobile:70px]
   `);
 
-  useEffect(() => {
-    setOption('layout', LayoutNames.ADVANCE_MEGA_MENU);
-  }, [setOption]);
-
   return (
     <>
       <div className="flex grow flex-col in-data-[sticky-header=on]:pt-(--header-height-default)">
         <Header />
 
-        <div className="grow" role="content">
-          {!pathname.includes('/public-profile/') && (
+        <main className="grow" role="content">
+          {showToolbar && (
             <Toolbar>
               <ToolbarHeading />
-
-              <ToolbarActions>
-                <Button variant="outline" asChild>
-                  <Link to={'/account/home/get-started'}>
-                    <Download />
-                    Export
-                  </Link>
-                </Button>
-
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <Button id="date" variant="outline">
-                      <CalendarDays />
-                      {date?.from ? (
-                        date.to ? (
-                          <span>
-                            {format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')}
-                          </span>
-                        ) : (
-                          format(date.from, 'LLL dd, y')
-                        )
-                      ) : (
-                        <span>Pick a date range</span>
-                      )}
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-auto p-0" align="end">
-                    <Calendar
-                      mode="range"
-                      defaultMonth={date?.from}
-                      selected={date}
-                      onSelect={setDate}
-                      numberOfMonths={2}
-                    />
-                  </PopoverContent>
-                </Popover>
-              </ToolbarActions>
             </Toolbar>
           )}
           <Outlet />
-        </div>
+        </main>
 
-        <Footer />
+        {showFooter && <AppFooter />}
       </div>
     </>
   );