design sidebar & head layout & page dashboard

2024-09-10 02:00:41 +03:30
parent 60749d3b8c
commit dffdab7139
41 changed files with 1350 additions and 170 deletions
@@ -0,0 +1,36 @@
+import { Button } from '@mui/material'
+import React from 'react'
+import MoonP from '@/components/icons/MoonP'
+import NotificationP from '@/components/icons/NotificationP'
+import SettingP from '@/components/icons/SettingP'
+
+function Icons() {
+    return (
+        <div className="flex items-center justify-start gap-[12px]">
+            <Button
+                className="!p-[8px] !min-w-fit !border-[#EFEFEF] !rounded-[8px]"
+                variant="outlined"
+            >
+                <MoonP />
+            </Button>
+            <Button
+                className="!p-[8px] !min-w-fit !border-[#EFEFEF] !rounded-[8px]"
+                variant="outlined"
+            >
+                <SettingP />
+            </Button>
+            <Button
+                className='
+                    !p-[8px] !min-w-fit !border-[#EFEFEF] !rounded-[8px] !relative before:!rounded-full
+                    before:!absolute before:!right-[-2px] before:!top-[-2px] before:!w-[6px] before:!h-[6px]
+                    before:!bg-[#D32F2F]
+                '
+                variant="outlined"
+            >
+                <NotificationP />
+            </Button>
+        </div>
+    )
+}
+
+export default Icons
@@ -0,0 +1,54 @@
+import SearchHeaderP from "@/components/icons/SearchHeaderP"
+import { InputAdornment, TextField } from "@mui/material"
+
+function Search() {
+    return (
+        <TextField
+            placeholder="جستجو"
+            fullWidth
+            InputProps={{
+                startAdornment: (
+                    <InputAdornment position="start">
+                        <SearchHeaderP />
+                    </InputAdornment>
+                ),
+            }}
+            sx={{
+                '& .MuiOutlinedInput-input': {
+                    paddingTop: '9px !important',
+                    paddingBottom: '9px !important'
+                },
+                '& .MuiFormLabel-root': {
+                    top: '-4px !important'
+                },
+                '& .MuiInputBase-root': {
+                    borderRadius: '8px',
+                },
+                '& .MuiOutlinedInput-input': {
+                    paddingTop: '9px !important',
+                    paddingBottom: '9px !important'
+                },
+                '& .MuiOutlinedInput-notchedOutline': {
+                    border: '1px solid #EFEFEF !important',
+                    transition: '0.3s all !important'
+                },
+                '& .MuiOutlinedInput-root': {
+                    '&.MuiInputBase-root,.MuiFormLabel-root ': {
+                        color: '#7E7E7E !important',
+                        fontsize: '14px',
+                        fontweight: '400',
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                        border: '1px solid #EFEFEF !important',
+                    },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                        border: '1px solid #5559CE !important',
+                        transition: '0.3s all !important'
+                    },
+                },
+            }}
+        />
+    )
+}
+
+export default Search
@@ -0,0 +1,18 @@
+import Icons from "./Icons"
+import Search from "./Search"
+
+function index() {
+    return (
+        <div
+            className='
+                h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
+                flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[56px]
+            '
+        >
+            <Search />
+            <Icons />
+        </div>
+    )
+}
+
+export default index