Feat: started work with Mantine

2025-01-23 16:45:34 +03:00
parent c8a42598bf
commit d97cafa9ec
8 changed files with 126 additions and 15 deletions
--- a/src/_mantine.scss
+++ b/src/_mantine.scss
@@ -0,0 +1,57 @@
+@use 'sass:math';
+
+// Define variables for your breakpoints,
+// values must be the same as in your theme
+$mantine-breakpoint-xs: '36em';
+$mantine-breakpoint-sm: '48em';
+$mantine-breakpoint-md: '62em';
+$mantine-breakpoint-lg: '75em';
+$mantine-breakpoint-xl: '88em';
+
+@function rem($value) {
+  @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
+}
+
+@mixin light {
+  [data-mantine-color-scheme='light'] & {
+    @content;
+  }
+}
+
+@mixin dark {
+  [data-mantine-color-scheme='dark'] & {
+    @content;
+  }
+}
+
+@mixin hover {
+  @media (hover: hover) {
+    &:hover {
+      @content;
+    }
+  }
+
+  @media (hover: none) {
+    &:active {
+      @content;
+    }
+  }
+}
+
+@mixin smaller-than($breakpoint) {
+  @media (max-width: $breakpoint) {
+    @content;
+  }
+}
+
+@mixin larger-than($breakpoint) {
+  @media (min-width: $breakpoint) {
+    @content;
+  }
+}
+
+@mixin ltr {
+  [dir='ltr'] & {
+    @content;
+  }
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,3 +1,5 @@
+import { ColorSchemeScript, MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.scss";
@@ -25,10 +27,11 @@ export default function RootLayout({
  return (
    <html lang="ru" suppressHydrationWarning>
      <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta charSet="utf-8" />
+        <ColorSchemeScript />
      </head>
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <MantineProvider>{children}</MantineProvider>
+      </body>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,42 @@
 "use client";

+import { AppShell, Burger, Button, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { LuSun } from "react-icons/lu";
+
 export default function Home() {
+  const [opened, { toggle }] = useDisclosure();
+  const { setColorScheme, colorScheme } = useMantineColorScheme();
  return (
-    <div>
-      <p>Test</p>
-    </div>
+    <AppShell
+      header={{ height: 60 }}
+      navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
+      padding="md"
+    >
+      <AppShell.Header>
+        <Group h="100%" px="md">
+          <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
+          <div>Logo</div>
+        </Group>
+      </AppShell.Header>
+      <AppShell.Navbar p="md">
+        {Array(15)
+          .fill(0)
+          .map((_, index) => (
+            <Skeleton key={index} h={28} mt="sm" animate={false} />
+          ))}
+        <Button
+          onClick={() => {
+            setColorScheme(colorScheme === "light" ? "dark" : "light");
+          }}
+        >
+          <LuSun />
+        </Button>
+      </AppShell.Navbar>
+      <AppShell.Main>Main</AppShell.Main>
+      <AppShell.Footer>
+        <div>Footer</div>
+      </AppShell.Footer>
+    </AppShell>
  );
 }