feat: basic dashboard layout setup done

.eslintrc.json

@@ -13,12 +13,7 @@
   "rules": {
     "react/no-unescaped-entities": 0,
     "no-console": "error",
-    "prettier/prettier": [
-      "warn",
-      {
-        "endOfLine": "auto"
-      }
-    ]
+    "prettier/prettier": ["warn"]
   },
   "overrides": [
     // Configuration for TypeScript files

README.md

@@ -0,0 +1,3 @@
+# Ecommerce Admin Dashboard With Mantin UI
+
+![EcommHub Dashboard](/src/assets/dashboard.png)

src/App.tsx

@@ -1,17 +1,29 @@
 import type { ColorScheme } from '@mantine/core'
 import { ColorSchemeProvider, MantineProvider } from '@mantine/core'
+import { useHotkeys, useLocalStorage } from '@mantine/hooks'
 import React from 'react'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
 
 import Layout from '@/components/Layout/Layout'
 import { About, Home, NotFound } from '@/screens'
 
 function App() {
-  const [colorScheme, setColorScheme] = React.useState<ColorScheme>('light')
+  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
+    key: 'mantine-color-scheme',
+    defaultValue: 'light',
+    getInitialValueInEffect: true
+  })
+
   const toggleColorScheme = (value?: ColorScheme) =>
     setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'))
+
+  useHotkeys([['mod+J', () => toggleColorScheme()]])
   return (
-    <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
+    <MantineProvider
+      theme={{ colorScheme, primaryColor: 'yellow' }}
+      withGlobalStyles
+      withNormalizeCSS
+    >
       <ColorSchemeProvider
         colorScheme={colorScheme}
         toggleColorScheme={toggleColorScheme}

src/components/Layout/Footer/Footer.tsx

@@ -0,0 +1,30 @@
+import { Footer, Paper, Text, UnstyledButton } from '@mantine/core'
+import { IconBrandGithub } from '@tabler/icons'
+import React from 'react'
+
+import { COLORS } from '@/utils/constants'
+
+const FooterBar = () => {
+  return (
+    <Footer height={60} p="md">
+      <Paper>
+        Copywright &copy; 2023,{' '}
+        <IconBrandGithub style={{ display: 'inline' }} size={16} />{' '}
+        <UnstyledButton>
+          <Text
+            variant="gradient"
+            weight={600}
+            component="a"
+            target="_blank"
+            href="https://github.com/shubhamwebdesign"
+            gradient={{ from: COLORS.primary, to: COLORS.secondary }}
+          >
+            shubhamwebdesign
+          </Text>
+        </UnstyledButton>
+      </Paper>
+    </Footer>
+  )
+}
+
+export default FooterBar

src/components/Layout/Header/Header.tsx

@@ -0,0 +1,56 @@
+import {
+  Burger,
+  Header,
+  MediaQuery,
+  useMantineColorScheme,
+  useMantineTheme
+} from '@mantine/core'
+import React from 'react'
+
+import EcommHub from '@/assets/ecommhub.svg'
+import { ToggleButton } from '@/components/common'
+
+import NavAction from '../NavAction/NavAction'
+
+type HeaderBarType = {
+  opened: boolean
+  setOpened: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const HeaderBar: React.FC<HeaderBarType> = ({ opened, setOpened }) => {
+  const { colorScheme } = useMantineColorScheme()
+  const theme = useMantineTheme()
+  return (
+    <Header
+      height={60}
+      p="xs"
+      display="flex"
+      style={{ justifyContent: 'space-between', alignItems: 'center' }}
+    >
+      <img
+        style={{
+          mixBlendMode: colorScheme === 'light' ? 'darken' : 'exclusion'
+        }}
+        src={EcommHub}
+      />
+      <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+        <Burger
+          opened={opened}
+          onClick={() => setOpened((o) => !o)}
+          size="sm"
+          color={theme.colors.gray[7]}
+          mx="xl"
+        />
+      </MediaQuery>
+      <div className="mr-6 hidden w-full justify-end md:flex">
+        <NavAction />
+      </div>
+
+      <div className="hidden md:block">
+        <ToggleButton />
+      </div>
+    </Header>
+  )
+}
+
+export default HeaderBar

src/components/Layout/Layout.tsx

@@ -1,32 +1,43 @@
-import { Stack, Title } from '@mantine/core'
-import React from 'react'
+import { AppShell, Navbar, useMantineTheme } from '@mantine/core'
+import { useState } from 'react'
 
-import { ToggleButton } from '@/components/common'
-
-import Navbar from './Navbar/Navbar'
+import FooterBar from './Footer/Footer'
+import HeaderBar from './Header/Header'
+import NavigationBar from './Navbar/Navbar'
 
 type LayoutType = {
   children: React.ReactNode
 }
 
-const Layout: React.FC<LayoutType> = ({ children }) => {
+export default function Layout({ children }: LayoutType) {
+  const theme = useMantineTheme()
+  const [opened, setOpened] = useState(false)
   return (
-    <div className="relative flex">
-      <div className="fixed top-0">
-        <Navbar />
-      </div>
-      <div className="m-8 ml-[100px] flex-1">
-        <div className="flex items-center justify-between">
-          <Stack ml="xl" spacing="xs">
-            <Title order={2}>EcommHub</Title>
-            <p>Your Online Shopping Destination, Now</p>
-          </Stack>
-          <ToggleButton />
-        </div>
-        <div>{children}</div>
-      </div>
-    </div>
+    <AppShell
+      styles={{
+        main: {
+          background:
+            theme.colorScheme === 'dark'
+              ? theme.colors.dark[8]
+              : theme.colors.gray[0]
+        }
+      }}
+      navbarOffsetBreakpoint="sm"
+      asideOffsetBreakpoint="sm"
+      navbar={
+        <Navbar
+          p="md"
+          hiddenBreakpoint="sm"
+          hidden={!opened}
+          width={{ sm: 200, lg: 300 }}
+        >
+          <NavigationBar />
+        </Navbar>
+      }
+      footer={<FooterBar />}
+      header={<HeaderBar opened={opened} setOpened={setOpened} />}
+    >
+      {children}
+    </AppShell>
   )
 }
-
-export default Layout

src/components/Layout/NavAction/NavAction.tsx

@@ -0,0 +1,21 @@
+import { ActionIcon, Group } from '@mantine/core'
+import { IconBellRinging, IconListCheck, IconMessage } from '@tabler/icons'
+import React from 'react'
+
+const NavAction = () => {
+  return (
+    <Group spacing="lg">
+      <ActionIcon title="Notifications" variant="outline">
+        <IconBellRinging size={20} />
+      </ActionIcon>
+      <ActionIcon title="List" variant="outline">
+        <IconListCheck size={20} />
+      </ActionIcon>
+      <ActionIcon title="Messages" variant="outline">
+        <IconMessage size={18} />
+      </ActionIcon>
+    </Group>
+  )
+}
+
+export default NavAction