design sidebar & head layout & page dashboard

components/layoutPanel/header/Icons.js

@@ -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