develop - changeset - added layout context, prime react, interfaces a…

…nd appbar and footer - v4
enatega · Jul 30, 2024 · 7505dd6 · 7505dd6
1 parent 86f4ce3
commit 7505dd6
Show file tree

Hide file tree

Showing 23 changed files with 626 additions and 143 deletions.
diff --git a/app/(protected)/dashboard/page.tsx b/app/(protected)/dashboard/page.tsx
@@ -0,0 +1,14 @@
+import { Button } from 'primereact/button';
+import { Card } from 'primereact/card';
+
+export default function Dashboard() {
+  return (
+    <div className="card flex justify-content-center">
+      <Button>Add</Button>
+
+      <Card>
+        <p>Some text</p>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/(protected)/layout.tsx b/app/(protected)/layout.tsx
@@ -0,0 +1,10 @@
+// Styles
+import MainLayout from '@/lib/ui/layouts/main';
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <MainLayout>{children}</MainLayout>;
+}
diff --git a/app/globals.css b/app/globals.css
@@ -1,21 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 :root {
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
+  --background-start-rgb: 255, 255, 255;
   --background-end-rgb: 255, 255, 255;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
 body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(
@@ -25,9 +13,3 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,12 +1,17 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import { PrimeReactProvider } from 'primereact/api';
+import 'primereact/resources/primereact.min.css';
+import 'primereact/resources/themes/saga-green/theme.css';
+
+import { LayoutProvider } from '@/lib/context/layout-context';
 import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Enatega Customer',
+  description: 'Generated by Ninjas Code',
 };
 
 export default function RootLayout({
@@ -16,7 +21,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <PrimeReactProvider>
+          <LayoutProvider>{children}</LayoutProvider>
+        </PrimeReactProvider>
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
diff --git a/lib/context/layout-context.tsx b/lib/context/layout-context.tsx
@@ -0,0 +1,78 @@
+'use client';
+import { ILayoutProvider } from '@/lib/utils/interfaces';
+import {
+  LayoutConfig,
+  LayoutContextProps,
+  LayoutState,
+} from '@/lib/utils/types';
+import { createContext, useState } from 'react';
+export const LayoutContext = createContext({} as LayoutContextProps);
+
+export const LayoutProvider = ({ children }: ILayoutProvider) => {
+  const [layoutConfig, setLayoutConfig] = useState<LayoutConfig>({
+    ripple: false,
+    inputStyle: 'outlined',
+    menuMode: 'static',
+    colorScheme: 'light',
+    theme: 'lara-light-indigo',
+    scale: 14,
+  });
+
+  const [layoutState, setLayoutState] = useState<LayoutState>({
+    staticMenuDesktopInactive: false,
+    overlayMenuActive: false,
+    profileSidebarVisible: false,
+    configSidebarVisible: false,
+    staticMenuMobileActive: false,
+    menuHoverActive: false,
+  });
+
+  const onMenuToggle = () => {
+    if (isOverlay()) {
+      setLayoutState((prevLayoutState) => ({
+        ...prevLayoutState,
+        overlayMenuActive: !prevLayoutState.overlayMenuActive,
+      }));
+    }
+
+    if (isDesktop()) {
+      setLayoutState((prevLayoutState) => ({
+        ...prevLayoutState,
+        staticMenuDesktopInactive: !prevLayoutState.staticMenuDesktopInactive,
+      }));
+    } else {
+      setLayoutState((prevLayoutState) => ({
+        ...prevLayoutState,
+        staticMenuMobileActive: !prevLayoutState.staticMenuMobileActive,
+      }));
+    }
+  };
+
+  const showProfileSidebar = () => {
+    setLayoutState((prevLayoutState) => ({
+      ...prevLayoutState,
+      profileSidebarVisible: !prevLayoutState.profileSidebarVisible,
+    }));
+  };
+
+  const isOverlay = () => {
+    return layoutConfig.menuMode === 'overlay';
+  };
+
+  const isDesktop = () => {
+    return window.innerWidth > 991;
+  };
+
+  const value: LayoutContextProps = {
+    layoutConfig,
+    setLayoutConfig,
+    layoutState,
+    setLayoutState,
+    onMenuToggle,
+    showProfileSidebar,
+  };
+
+  return (
+    <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>
+  );
+};
diff --git a/lib/utils/types/index.ts → lib/ui/components/app-bar/app-bar.module.css b/lib/utils/types/index.ts → lib/ui/components/app-bar/app-bar.module.css
diff --git a/lib/ui/components/app-bar/index.tsx b/lib/ui/components/app-bar/index.tsx
@@ -0,0 +1,79 @@
+/* eslint-disable @next/next/no-img-element */
+
+import { LayoutContext } from '@/lib/context/layout-context';
+import { AppTopbarRef } from '@/lib/utils/types';
+import Link from 'next/link';
+import { classNames } from 'primereact/utils';
+import { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+
+const AppTopbar = forwardRef<AppTopbarRef>((props, ref) => {
+  const { layoutConfig, layoutState, onMenuToggle, showProfileSidebar } =
+    useContext(LayoutContext);
+  const menubuttonRef = useRef(null);
+  const topbarmenuRef = useRef(null);
+  const topbarmenubuttonRef = useRef(null);
+
+  useImperativeHandle(ref, () => ({
+    menubutton: menubuttonRef.current,
+    topbarmenu: topbarmenuRef.current,
+    topbarmenubutton: topbarmenubuttonRef.current,
+  }));
+
+  return (
+    <div className="layout-topbar">
+      <Link href="/" className="layout-topbar-logo">
+        <img
+          src={`/layout/images/logo-${layoutConfig.colorScheme !== 'light' ? 'white' : 'dark'}.svg`}
+          width="47.22px"
+          height={'35px'}
+          alt="logo"
+        />
+        <span>SAKAI</span>
+      </Link>
+
+      <button
+        ref={menubuttonRef}
+        type="button"
+        className="p-link layout-menu-button layout-topbar-button"
+        onClick={onMenuToggle}
+      >
+        <i className="pi pi-bars" />
+      </button>
+
+      <button
+        ref={topbarmenubuttonRef}
+        type="button"
+        className="p-link layout-topbar-menu-button layout-topbar-button"
+        onClick={showProfileSidebar}
+      >
+        <i className="pi pi-ellipsis-v" />
+      </button>
+
+      <div
+        ref={topbarmenuRef}
+        className={classNames('layout-topbar-menu', {
+          'layout-topbar-menu-mobile-active': layoutState.profileSidebarVisible,
+        })}
+      >
+        <button type="button" className="p-link layout-topbar-button">
+          <i className="pi pi-calendar"></i>
+          <span>Calendar</span>
+        </button>
+        <button type="button" className="p-link layout-topbar-button">
+          <i className="pi pi-user"></i>
+          <span>Profile</span>
+        </button>
+        <Link href="/documentation">
+          <button type="button" className="p-link layout-topbar-button">
+            <i className="pi pi-cog"></i>
+            <span>Settings</span>
+          </button>
+        </Link>
+      </div>
+    </div>
+  );
+});
+
+AppTopbar.displayName = 'AppTopbar';
+
+export default AppTopbar;
diff --git a/lib/ui/components/app-footer/app-bar.module.css b/lib/ui/components/app-footer/app-bar.module.css
diff --git a/lib/ui/components/app-footer/index.tsx b/lib/ui/components/app-footer/index.tsx
@@ -0,0 +1,10 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+
+const AppFooter = () => {
+  return <div>Footer</div>;
+};
+
+AppFooter.displayName = 'AppFooter';
+
+export default AppFooter;