From d01cb72d9f58c75786cccc13f2c7e1a4d1434fca Mon Sep 17 00:00:00 2001
From: Geolffrey Mena <gmjun2000@gmail.com>
Date: Mon, 29 Jul 2024 08:06:10 -0600
Subject: [PATCH 1/4] chore: added ci workflow

---
 .github/workflow/ci.yml | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 .github/workflow/ci.yml

diff --git a/.github/workflow/ci.yml b/.github/workflow/ci.yml
new file mode 100644
index 00000000..7c2ebbf9
--- /dev/null
+++ b/.github/workflow/ci.yml
@@ -0,0 +1,35 @@
+name: CI
+
+on:
+  workflow_call:
+  # https://github.com/marketplace/actions/jest-coverage-report#forks-with-no-write-permission
+  pull_request:
+
+jobs:
+  ci:
+    name: Static Analysis and Test | Node ${{matrix.node}}
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ["18", "20"]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js v${{matrix.node}}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run static analysis
+        run: make lint
+
+      - name: Test 
+        run: make test
+
+      - name: Generate report
+        run: make testcov

From cbc28fd6b8d76fce2cfe663415038d6b0a1b40a7 Mon Sep 17 00:00:00 2001
From: Geolffrey Mena <gmjun2000@gmail.com>
Date: Mon, 29 Jul 2024 08:07:18 -0600
Subject: [PATCH 2/4] chore: added makefile

---
 Makefile | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 Makefile

diff --git a/Makefile b/Makefile
new file mode 100644
index 00000000..e69de29b

From 18a004e07c285a8ed1c2bcad1b8b4f5f07b419dd Mon Sep 17 00:00:00 2001
From: Geolffrey Mena <gmjun2000@gmail.com>
Date: Mon, 29 Jul 2024 08:08:11 -0600
Subject: [PATCH 3/4] chore: added makefile

---
 .github/{workflow => workflows}/ci.yml | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename .github/{workflow => workflows}/ci.yml (100%)

diff --git a/.github/workflow/ci.yml b/.github/workflows/ci.yml
similarity index 100%
rename from .github/workflow/ci.yml
rename to .github/workflows/ci.yml

From 853389dde00541eca41e6b1888a1bfc173a94450 Mon Sep 17 00:00:00 2001
From: jadapema <jadapema@gmail.com>
Date: Thu, 15 Aug 2024 14:43:10 -0600
Subject: [PATCH 4/4] feat: added menu mini

---
 package-lock.json                             |  25 ++++
 package.json                                  |   1 +
 public/assets/icons/navbar/ic_watchit.svg     |   5 +
 .../nav-section/horizontal/nav-list.tsx       |   4 +-
 src/components/nav-section/mini/nav-item.tsx  | 122 +++++++++---------
 src/components/nav-section/mini/nav-list.tsx  |  85 ++++--------
 .../nav-section/mini/nav-section-mini.tsx     |  27 ++--
 src/components/nav-section/mini/styles.ts     |  59 ++++++---
 src/components/nav-section/types.ts           |   3 +-
 .../nav-section/vertical/nav-list.tsx         |   4 +-
 src/components/nav-section/vertical/styles.ts |   7 +-
 src/layouts/_common/searchbar/searchbar.tsx   |  22 +++-
 src/layouts/config-layout.ts                  |   4 +-
 .../dashboard/config-navigation-mini.tsx      |  26 ++++
 src/layouts/dashboard/main.tsx                |   1 +
 src/layouts/dashboard/nav-mini.tsx            |  67 +++++++++-
 src/layouts/dashboard/nav-vertical.tsx        |   4 +-
 .../form-validation-view/react-hook-form.tsx  |  10 +-
 .../_examples/extra/navigation-bar-view.tsx   |   8 +-
 src/sections/coming-soon/view.tsx             |   2 +-
 src/theme/palette.ts                          |  10 +-
 yarn.lock                                     |  12 ++
 22 files changed, 308 insertions(+), 200 deletions(-)
 create mode 100644 public/assets/icons/navbar/ic_watchit.svg
 create mode 100644 src/layouts/dashboard/config-navigation-mini.tsx

diff --git a/package-lock.json b/package-lock.json
index f66c0cb0..f7a0cc42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "@mui/x-data-grid": "^6.10.0",
         "@mui/x-date-pickers": "^6.10.0",
         "@react-pdf/renderer": "^3.1.12",
+        "@tabler/icons-react": "^3.11.0",
         "apexcharts": "^3.41.0",
         "autosuggest-highlight": "^3.3.4",
         "axios": "^1.4.0",
@@ -7953,6 +7954,30 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
       "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA=="
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.11.0.tgz",
+      "integrity": "sha512-/vZinJNvCYhdAB+RUsyCpanSPuOEKHHIZi4Uu0Bw7ilewHnQhCWUPrT704uHCRli2ROl7spADPmWzAqOganA5A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.11.0.tgz",
+      "integrity": "sha512-xHNBi9mns1slvqos+7LkP3ube4CjWrANMbxMaorzwzO9J/+y1sAEG/sN8CV8FmtpYW/9/gDR+OWCjjLLg0RmAw==",
+      "dependencies": {
+        "@tabler/icons": "3.11.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
diff --git a/package.json b/package.json
index fd9d351e..587bbf67 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "@mui/x-data-grid": "^6.10.0",
     "@mui/x-date-pickers": "^6.10.0",
     "@react-pdf/renderer": "^3.1.12",
+    "@tabler/icons-react": "^3.11.0",
     "apexcharts": "^3.41.0",
     "autosuggest-highlight": "^3.3.4",
     "axios": "^1.4.0",
diff --git a/public/assets/icons/navbar/ic_watchit.svg b/public/assets/icons/navbar/ic_watchit.svg
new file mode 100644
index 00000000..2ec92251
--- /dev/null
+++ b/public/assets/icons/navbar/ic_watchit.svg
@@ -0,0 +1,5 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75057 12.6104C5.80343 17.1654 7.92545 21.4568 10.3631 15.1616C10.6965 14.3524 10.9396 12.7796 11.4841 12.7796V12.7876C12.0286 12.7876 12.2715 14.3604 12.605 15.1696C15.0427 21.4648 17.1647 17.1733 19.2176 12.6184C19.3721 12.2749 19.5205 11.947 19.6475 11.6621C14.943 15.439 15.339 4.02885 11.4841 3.93818V3.93019C7.62903 4.02086 8.02518 15.431 3.32068 11.6542C3.4476 11.939 3.596 12.2669 3.75057 12.6104Z" fill="#F2F3F5"/>
+<path d="M3.32068 11.6535C5.60537 13.4947 6.67997 11.7534 7.62642 9.47153C6.84322 7.66303 6.31495 6.53463 6.06182 6.13585C5.58449 5.38359 5.06378 4.81402 4.42336 4.48538C2.11674 3.11059 0.902708 6.36836 2.01986 8.81019L3.32068 11.6535Z" fill="#F2F3F5"/>
+<ellipse cx="20.1411" cy="5.91458" rx="1.96927" ry="1.96927" fill="#F2F3F5"/>
+</svg>
diff --git a/src/components/nav-section/horizontal/nav-list.tsx b/src/components/nav-section/horizontal/nav-list.tsx
index 5ca42723..7a40a1d4 100644
--- a/src/components/nav-section/horizontal/nav-list.tsx
+++ b/src/components/nav-section/horizontal/nav-list.tsx
@@ -24,9 +24,9 @@ export default function NavList({ data, depth, hasChild, config }: NavListRootPr
 
   const pathname = usePathname();
 
-  const active = useActiveLink(data.path, hasChild);
+  const active = useActiveLink(data?.path ?? '', hasChild);
 
-  const externalLink = data.path.includes('http');
+  const externalLink = data?.path?.includes('http');
 
   const [open, setOpen] = useState(false);
 
diff --git a/src/components/nav-section/mini/nav-item.tsx b/src/components/nav-section/mini/nav-item.tsx
index efcf4b28..65ebc838 100644
--- a/src/components/nav-section/mini/nav-item.tsx
+++ b/src/components/nav-section/mini/nav-item.tsx
@@ -2,6 +2,7 @@ import { forwardRef } from 'react';
 // @mui
 import { useTheme } from '@mui/material/styles';
 import Link from '@mui/material/Link';
+import Box from '@mui/material/Box';
 import Tooltip from '@mui/material/Tooltip';
 import ListItemText from '@mui/material/ListItemText';
 // routes
@@ -10,7 +11,7 @@ import { RouterLink } from 'src/routes/components';
 import Iconify from '../../iconify';
 //
 import { NavItemProps, NavConfigProps } from '../types';
-import { StyledItem, StyledIcon } from './styles';
+import { StyledItem, StyledIcon, StyledNavContent } from './styles';
 
 // ----------------------------------------------------------------------
 
@@ -37,73 +38,68 @@ const NavItem = forwardRef<HTMLDivElement, Props>(
         config={config}
         {...other}
       >
-        {icon && (
-          <StyledIcon
-            size={config.iconSize}
-            sx={{
-              ...(subItem && { mr: 1.5 }),
-            }}
-          >
-            {icon}
-          </StyledIcon>
-        )}
+        <Box className='menu-pill'
+             sx={{
+               position: 'absolute',
+               top: 0,
+               left: 0,
+               width: '4px',
+               height: '100%',
+               display: 'flex',
+               overflow: 'hidden',
+               alignItems: 'center',
+               justifyContent: 'flex-start',
+               transition: 'all 0.2s ease-in-out'
+             }}
+        >
+          <Box className='pill' sx={{
+            width: active ? '4px' : 0 ,
+            height: active ? '60%' : 0,
+            borderRadius: 0,
+            borderTopRightRadius: '1rem',
+            borderBottomRightRadius: '1rem',
+            backgroundColor: '#fff',
+            transition: 'all 0.3s ease-in-out'
+          }} />
+        </Box>
 
-        {!(config.hiddenLabel && !subItem) && (
-          <ListItemText
-            sx={{
-              width: 1,
-              flex: 'unset',
-              ...(!subItem && {
-                px: 0.5,
-                mt: 0.5,
-              }),
-            }}
-            primary={title}
-            primaryTypographyProps={{
-              noWrap: true,
-              fontSize: 10,
-              lineHeight: '16px',
-              textAlign: 'center',
-              textTransform: 'capitalize',
-              fontWeight: active ? 'fontWeightBold' : 'fontWeightSemiBold',
-              ...(subItem && {
-                textAlign: 'unset',
-                fontSize: theme.typography.body2.fontSize,
-                lineHeight: theme.typography.body2.lineHeight,
-                fontWeight: active ? 'fontWeightSemiBold' : 'fontWeightMedium',
-              }),
-            }}
-          />
-        )}
+        <StyledNavContent
+          active={active}
+        >
+          {icon && (
+            <StyledIcon
+              size={config.iconSize}
+              sx={{
+                width: '1.7rem',
+                height: '1.7rem',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                ...(subItem && { mr: 1.5 }),
+              }}
+            >
+              {icon}
+            </StyledIcon>
+          )}
 
-        {caption && (
-          <Tooltip title={caption} arrow placement="right">
-            <Iconify
-              width={16}
-              icon="eva:info-outline"
+          {!icon && title && (
+            <ListItemText
               sx={{
-                color: 'text.disabled',
-                ...(!subItem && {
-                  top: 11,
-                  left: 6,
-                  position: 'absolute',
-                }),
+                width: 1,
+                flex: 'unset'
+              }}
+              primary={title.slice(0,4)}
+              primaryTypographyProps={{
+                noWrap: true,
+                fontSize: 14,
+                lineHeight: 1,
+                textAlign: 'center',
+                textTransform: 'capitalize',
+                fontWeight: active ? 'fontWeightBold' : 'fontWeightSemiBold',
               }}
             />
-          </Tooltip>
-        )}
-
-        {!!children && (
-          <Iconify
-            width={16}
-            icon="eva:arrow-ios-forward-fill"
-            sx={{
-              top: 11,
-              right: 6,
-              position: 'absolute',
-            }}
-          />
-        )}
+          )}
+        </StyledNavContent>
       </StyledItem>
     );
 
diff --git a/src/components/nav-section/mini/nav-list.tsx b/src/components/nav-section/mini/nav-list.tsx
index 31d5aa27..5a4911c9 100644
--- a/src/components/nav-section/mini/nav-list.tsx
+++ b/src/components/nav-section/mini/nav-list.tsx
@@ -14,20 +14,17 @@ import NavItem from './nav-item';
 
 type NavListRootProps = {
   data: NavListProps;
+  active?: boolean;
   depth: number;
-  hasChild: boolean;
   config: NavConfigProps;
+  onClick?: () => void
 };
 
-export default function NavList({ data, depth, hasChild, config }: NavListRootProps) {
+export default function NavList({ data, active, depth, config, onClick }: NavListRootProps) {
   const navRef = useRef(null);
 
   const pathname = usePathname();
 
-  const active = useActiveLink(data.path, hasChild);
-
-  const externalLink = data.path.includes('http');
-
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
@@ -74,63 +71,37 @@ export default function NavList({ data, depth, hasChild, config }: NavListRootPr
         item={data}
         depth={depth}
         open={open}
-        active={active}
-        externalLink={externalLink}
+        active={active || open}
         onMouseEnter={handleOpen}
         onMouseLeave={handleClose}
         config={config}
+        onClick={onClick}
       />
 
-      {hasChild && (
-        <Popover
-          open={open}
-          anchorEl={navRef.current}
-          anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
-          transformOrigin={{ vertical: 'center', horizontal: 'left' }}
-          slotProps={{
-            paper: {
-              onMouseEnter: handleOpen,
-              onMouseLeave: handleClose,
-              sx: {
-                mt: 0.5,
-                width: 160,
-                ...(open && {
-                  pointerEvents: 'auto',
-                }),
-              },
+      <Popover
+        open={open}
+        anchorEl={navRef.current}
+        anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'center', horizontal: 'left' }}
+        slotProps={{
+          paper: {
+            onMouseEnter: handleOpen,
+            onMouseLeave: handleClose,
+            sx: {
+              backgroundColor: 'rgba(0,0,0,0.6)',
+              padding: '8px 20px',
+              ...(open && {
+                pointerEvents: 'auto',
+              }),
             },
-          }}
-          sx={{
-            pointerEvents: 'none',
-          }}
-        >
-          <NavSubList data={data.children} depth={depth} config={config} />
-        </Popover>
-      )}
+          },
+        }}
+        sx={{
+          pointerEvents: 'none'
+        }}
+      >
+        { data.title }
+      </Popover>
     </>
   );
 }
-
-// ----------------------------------------------------------------------
-
-type NavListSubProps = {
-  data: NavListProps[];
-  depth: number;
-  config: NavConfigProps;
-};
-
-function NavSubList({ data, depth, config }: NavListSubProps) {
-  return (
-    <Stack spacing={0.5}>
-      {data.map((list) => (
-        <NavList
-          key={list.title + list.path}
-          data={list}
-          depth={depth + 1}
-          hasChild={!!list.children}
-          config={config}
-        />
-      ))}
-    </Stack>
-  );
-}
diff --git a/src/components/nav-section/mini/nav-section-mini.tsx b/src/components/nav-section/mini/nav-section-mini.tsx
index 621d984d..d691fcef 100644
--- a/src/components/nav-section/mini/nav-section-mini.tsx
+++ b/src/components/nav-section/mini/nav-section-mini.tsx
@@ -1,43 +1,32 @@
 import { memo } from 'react';
-import Stack from '@mui/material/Stack';
 //
-import { NavSectionProps, NavListProps, NavConfigProps } from '../types';
-import { navMiniConfig } from '../config';
+import { NavListProps, NavConfigProps } from '../types';
 import NavList from './nav-list';
 
 // ----------------------------------------------------------------------
 
-function NavSectionMini({ data, config, sx, ...other }: NavSectionProps) {
-  return (
-    <Stack sx={sx} {...other}>
-      {data.map((group, index) => (
-        <Group key={index} items={group.items} config={navMiniConfig(config)} />
-      ))}
-    </Stack>
-  );
-}
-
-export default memo(NavSectionMini);
-
-// ----------------------------------------------------------------------
-
 type GroupProps = {
   items: NavListProps[];
+  activeId?: string;
   config: NavConfigProps;
+  onClick?: (id: string) => void
 };
 
-function Group({ items, config }: GroupProps) {
+function NavSectionMini({ items, activeId, config, onClick }: GroupProps) {
   return (
     <>
       {items.map((list) => (
         <NavList
           key={list.title + list.path}
+          active={activeId === list.id}
           data={list}
           depth={1}
-          hasChild={!!list.children}
           config={config}
+          onClick={() => { onClick?.(list.id ?? '') }}
         />
       ))}
     </>
   );
 }
+
+export default memo(NavSectionMini);
diff --git a/src/components/nav-section/mini/styles.ts b/src/components/nav-section/mini/styles.ts
index 7940322a..109ba9a7 100644
--- a/src/components/nav-section/mini/styles.ts
+++ b/src/components/nav-section/mini/styles.ts
@@ -1,7 +1,8 @@
 // @mui
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemButton from '@mui/material/ListItemButton';
+import Box from '@mui/material/Box';
 //
 import { NavItemProps, NavConfigProps } from '../types';
 
@@ -18,12 +19,7 @@ export const StyledItem = styled(ListItemButton, {
 
   const activeStyles = {
     root: {
-      color:
-        theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.primary.light,
-      backgroundColor: alpha(theme.palette.primary.main, 0.08),
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.16),
-      },
+      color: theme.palette.text.primary,
     },
     sub: {
       color: theme.palette.text.primary,
@@ -36,17 +32,29 @@ export const StyledItem = styled(ListItemButton, {
 
   return {
     // Root item
+    position: 'relative',
     flexDirection: 'column',
     justifyContent: 'center',
+    alignItems: 'center',
     borderRadius: config.itemRadius,
     minHeight: config.itemRootHeight,
     color: theme.palette.text.secondary,
-    margin: `0 ${config.itemGap}px ${config.itemGap}px ${config.itemGap}px`,
-    ...(config.hiddenLabel &&
-      !subItem && {
-        padding: config.itemPadding,
-      }),
-
+    margin: 0,
+    padding: '0 !important',
+    '&, & *': {
+      transition: 'all 0.1s ease-out'
+    },
+    '&:hover': {
+      backgroundColor: 'transparent'
+    },
+    '&:hover .MuiBox-root:not(.svg-color):not(.menu-pill):not(.pill)': {
+      borderRadius: '0.75rem',
+      backgroundColor: theme.palette.primary.main
+    },
+    '&:hover .pill': {
+      width: '4px',
+      height: '60%'
+    },
     // Active root item
     ...(active && {
       ...activeStyles.root,
@@ -63,18 +71,29 @@ export const StyledItem = styled(ListItemButton, {
         ...activeStyles.sub,
       }),
     }),
-
-    // Open
-    ...(open &&
-      !active && {
-        color: theme.palette.text.primary,
-        backgroundColor: theme.palette.action.hover,
-      }),
   };
 });
 
 // ----------------------------------------------------------------------
 
+type StyledNavContentProps = {
+  active?: boolean;
+};
+
+export const StyledNavContent = styled(Box)<StyledNavContentProps>(({ active, theme }) => ({
+  width: '3rem',
+  height: '3rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  // margin: 0,
+  margin: '0 0 0 0.1rem',
+  backgroundColor: active ? theme.palette.primary.main : '#313339',
+  borderRadius: active ? '0.75rem' : '50%',
+}));
+
+// ----------------------------------------------------------------------
+
 type StyledIconProps = {
   size?: number;
 };
diff --git a/src/components/nav-section/types.ts b/src/components/nav-section/types.ts
index 31c90440..dbf8e455 100644
--- a/src/components/nav-section/types.ts
+++ b/src/components/nav-section/types.ts
@@ -23,8 +23,9 @@ export type NavItemProps = ListItemButtonProps & {
 };
 
 export type NavListProps = {
+  id?: string;
   title: string;
-  path: string;
+  path?: string;
   icon?: React.ReactElement;
   info?: React.ReactElement;
   caption?: string;
diff --git a/src/components/nav-section/vertical/nav-list.tsx b/src/components/nav-section/vertical/nav-list.tsx
index c3fbf343..0db2388d 100644
--- a/src/components/nav-section/vertical/nav-list.tsx
+++ b/src/components/nav-section/vertical/nav-list.tsx
@@ -20,9 +20,9 @@ type NavListRootProps = {
 export default function NavList({ data, depth, hasChild, config }: NavListRootProps) {
   const pathname = usePathname();
 
-  const active = useActiveLink(data.path, hasChild);
+  const active = useActiveLink(data?.path ?? '', hasChild);
 
-  const externalLink = data.path.includes('http');
+  const externalLink = data?.path?.includes('http');
 
   const [open, setOpen] = useState(active);
 
diff --git a/src/components/nav-section/vertical/styles.ts b/src/components/nav-section/vertical/styles.ts
index 21fd6802..bcf316cc 100644
--- a/src/components/nav-section/vertical/styles.ts
+++ b/src/components/nav-section/vertical/styles.ts
@@ -21,11 +21,10 @@ export const StyledItem = styled(ListItemButton, {
 
   const activeStyles = {
     root: {
-      color:
-        theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.primary.light,
-      backgroundColor: alpha(theme.palette.primary.main, 0.08),
+      color: theme.palette.text.primary,
+      backgroundColor: alpha('#fff', 0.05),
       '&:hover': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.16),
+        backgroundColor: alpha('#fff', 0.1),
       },
     },
     sub: {
diff --git a/src/layouts/_common/searchbar/searchbar.tsx b/src/layouts/_common/searchbar/searchbar.tsx
index bdfb644d..364426c1 100644
--- a/src/layouts/_common/searchbar/searchbar.tsx
+++ b/src/layouts/_common/searchbar/searchbar.tsx
@@ -5,9 +5,10 @@ import match from 'autosuggest-highlight/match';
 import { useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import List from '@mui/material/List';
-import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
 import InputBase from '@mui/material/InputBase';
 import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
 import InputAdornment from '@mui/material/InputAdornment';
 import Dialog, { dialogClasses } from '@mui/material/Dialog';
 // hooks
@@ -106,13 +107,24 @@ function Searchbar() {
   };
 
   const renderButton = (
-    <Stack direction="row" alignItems="center">
-      <IconButton onClick={search.onTrue}>
+    <Button
+      onClick={search.onTrue} disableFocusRipple
+      sx={{
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        backgroundColor: '#24262A', borderRadius: 1.5, m: 1, p: 0.2,
+        '&:hover': {
+          // opacity: 0.7,
+          backgroundColor: '#1E1F22'
+        }
+      }}
+    >
+      <IconButton disableRipple>
         <Iconify icon="eva:search-fill" />
+        <Typography sx={{ ml: 1 }} variant='subtitle2'>Search</Typography>
       </IconButton>
 
-      {mdUp && <Label sx={{ px: 0.75, fontSize: 12, color: 'text.secondary' }}>⌘K</Label>}
-    </Stack>
+      {mdUp && <Label sx={{ px: 0.75, mr: 1, fontSize: 12, color: 'text.secondary' }}>⌘K</Label>}
+    </Button>
   );
 
   return (
diff --git a/src/layouts/config-layout.ts b/src/layouts/config-layout.ts
index 232cba2c..f7d25993 100644
--- a/src/layouts/config-layout.ts
+++ b/src/layouts/config-layout.ts
@@ -7,6 +7,6 @@ export const HEADER = {
 };
 
 export const NAV = {
-  W_VERTICAL: 280,
-  W_MINI: 88,
+  W_VERTICAL: 260,
+  W_MINI: 72,
 };
diff --git a/src/layouts/dashboard/config-navigation-mini.tsx b/src/layouts/dashboard/config-navigation-mini.tsx
new file mode 100644
index 00000000..c849b392
--- /dev/null
+++ b/src/layouts/dashboard/config-navigation-mini.tsx
@@ -0,0 +1,26 @@
+export const data = [
+  {
+    id: '1',
+    title: 'explore',
+  },
+  {
+    id: '12',
+    title: 'Comunity',
+  },
+  {
+    id: '123',
+    title: 'Gorvernance',
+  },
+  {
+    id: '1234',
+    title: 'Marketplace',
+  },
+  {
+    id: '12345',
+    title: 'Events',
+  },
+  {
+    id: '123456',
+    title: 'Achievements',
+  },
+]
diff --git a/src/layouts/dashboard/main.tsx b/src/layouts/dashboard/main.tsx
index 31f8fc8d..c7268697 100644
--- a/src/layouts/dashboard/main.tsx
+++ b/src/layouts/dashboard/main.tsx
@@ -22,6 +22,7 @@ export default function Main({ children, sx, ...other }: BoxProps) {
         minHeight: 1,
         display: 'flex',
         flexDirection: 'column',
+        backgroundColor: '#1E1F22',
         // py: `${HEADER.H_MOBILE + SPACING}px`,
         ...(lgUp && {
           px: 2,
diff --git a/src/layouts/dashboard/nav-mini.tsx b/src/layouts/dashboard/nav-mini.tsx
index 0d2795e3..3d8199fe 100644
--- a/src/layouts/dashboard/nav-mini.tsx
+++ b/src/layouts/dashboard/nav-mini.tsx
@@ -3,34 +3,91 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 // theme
 import { hideScroll } from 'src/theme/css';
+import { IconBrandApple, IconCloudDownload, IconGridDots, IconPlus } from '@tabler/icons-react';
 // components
-import Logo from 'src/components/logo';
+import NavItem from 'src/components/nav-section/mini/nav-item';
 import { NAV } from '../config-layout';
+import { NavSectionMini } from '../../components/nav-section';
+import { data } from './config-navigation-mini';
+import { paths } from '../../routes/paths';
+import NavList from '../../components/nav-section/mini/nav-list';
+import SvgColor from '../../components/svg-color';
 
 // ----------------------------------------------------------------------
 
 export default function NavMini() {
-
   return (
     <Box
       component="nav"
       sx={{
         flexShrink: { lg: 0 },
         width: { lg: NAV.W_MINI },
-        backgroundColor: 'rgba(0,0,0,0.5)'
+        backgroundColor: '#1E1F22'
       }}
     >
       <Stack
         sx={{
-          pb: 2,
+          py: 1,
           height: 1,
           position: 'fixed',
+          gap: 1,
           width: NAV.W_MINI,
           borderRight: (theme) => `dashed 1px ${theme.palette.divider}`,
           ...hideScroll.x,
         }}
       >
-        <Logo sx={{ mx: 'auto', my: 2 }} />
+        <NavList
+          active
+          data={{
+            id: 'watchit',
+            title: 'Watchit Collection',
+            path: paths.dashboard.root,
+            icon: <SvgColor src='/assets/icons/navbar/ic_watchit.svg' sx={{ width: 1, height: 1 }} />
+          }}
+          depth={1}
+          config={{}}
+          onClick={() => { console.log('clicked w') }}
+        />
+        <Box sx={{ width: '100%', py: 0.5 }} />
+        <NavSectionMini
+          items={data}
+          activeId=''
+          onClick={(id) => { console.log(`clicked ${id}`) }}
+          config={{
+            hiddenLabel: true
+          }}
+        />
+        <Box sx={{ width: '100%', py: 0.5 }} />
+        <NavList
+          data={{
+            id: 'new_collection',
+            title: 'New Collection',
+            icon: <IconPlus />
+          }}
+          depth={1}
+          config={{}}
+          onClick={() => { console.log('clicked w') }}
+        />
+        <NavList
+          data={{
+            id: 'explore_collections',
+            title: 'Eplore Collections',
+            icon: <IconGridDots />
+          }}
+          depth={1}
+          config={{}}
+          onClick={() => { console.log('clicked w') }}
+        />
+        <NavList
+          data={{
+            id: 'download_app',
+            title: 'Download Desktop App',
+            icon: <IconCloudDownload />
+          }}
+          depth={1}
+          config={{}}
+          onClick={() => { console.log('clicked w') }}
+        />
       </Stack>
     </Box>
   );
diff --git a/src/layouts/dashboard/nav-vertical.tsx b/src/layouts/dashboard/nav-vertical.tsx
index 5c4098bb..3bb9d3a0 100644
--- a/src/layouts/dashboard/nav-vertical.tsx
+++ b/src/layouts/dashboard/nav-vertical.tsx
@@ -49,7 +49,7 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
     <Scrollbar
       sx={{
         height: 1,
-        backgroundColor: 'rgba(0,0,0,0.1)',
+        backgroundColor: '#2B2D31',
         '& .simplebar-content': {
           height: 1,
           display: 'flex',
@@ -71,7 +71,7 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
         direction="row"
         alignItems="center"
         justifyContent="space-between"
-        sx={{ padding: '12px 16px 8px 16px', backgroundColor: 'rgba(0,0,0,0.3)' }}
+        sx={{ padding: '12px 16px 8px 16px', backgroundColor: '#232428' }}
       >
         <AccountPopover />
         <Box
diff --git a/src/sections/_examples/extra/form-validation-view/react-hook-form.tsx b/src/sections/_examples/extra/form-validation-view/react-hook-form.tsx
index 239b74fa..115f330c 100644
--- a/src/sections/_examples/extra/form-validation-view/react-hook-form.tsx
+++ b/src/sections/_examples/extra/form-validation-view/react-hook-form.tsx
@@ -123,7 +123,7 @@ export default function ReactHookForm({ debug }: Props) {
       });
 
       if (newFile) {
-        setValue('singleUpload', newFile, { shouldValidate: true });
+        // setValue('singleUpload', newFile, { shouldValidate: true });
       }
     },
     [setValue]
@@ -139,11 +139,11 @@ export default function ReactHookForm({ debug }: Props) {
         })
       );
 
-      setValue('multiUpload', [...files, ...newFiles], {
-        shouldValidate: true,
-      });
+      // setValue('multiUpload', [...files, ...newFiles], {
+      //   shouldValidate: true,
+      // });
     },
-    [setValue, values.multiUpload]
+    [values.multiUpload]
   );
 
   return (
diff --git a/src/sections/_examples/extra/navigation-bar-view.tsx b/src/sections/_examples/extra/navigation-bar-view.tsx
index 23467499..d99f6902 100644
--- a/src/sections/_examples/extra/navigation-bar-view.tsx
+++ b/src/sections/_examples/extra/navigation-bar-view.tsx
@@ -81,14 +81,8 @@ export default function NavigationBarView() {
       <Typography variant="h6"> Nav Mini </Typography>
 
       <NavSectionMini
-        data={NAV_ITEMS}
+        items={NAV_ITEMS[0].items}
         config={config}
-        sx={{
-          py: 2,
-          borderRadius: 2,
-          bgcolor: 'background.paper',
-          boxShadow: (theme) => theme.customShadows.z20,
-        }}
       />
     </Stack>
   );
diff --git a/src/sections/coming-soon/view.tsx b/src/sections/coming-soon/view.tsx
index ffd8bad4..62adf877 100644
--- a/src/sections/coming-soon/view.tsx
+++ b/src/sections/coming-soon/view.tsx
@@ -10,7 +10,7 @@ import { ComingSoonIllustration } from 'src/assets/illustrations';
 // ----------------------------------------------------------------------
 
 export default function ComingSoonView() {
-  const { days, hours, minutes, seconds } = useCountdownDate(new Date('09/01/2024 21:30'));
+  const { days, hours, minutes, seconds } = useCountdownDate(new Date('10/01/2024 21:30'));
 
   return (
     <>
diff --git a/src/theme/palette.ts b/src/theme/palette.ts
index d8416233..aa4a8f79 100644
--- a/src/theme/palette.ts
+++ b/src/theme/palette.ts
@@ -34,11 +34,11 @@ const GREY = {
 };
 
 const PRIMARY = {
-  lighter: '#EFD6FF',
-  light: '#C684FF',
-  main: '#8E33FF',
-  dark: '#5119B7',
-  darker: '#27097A',
+  lighter: '#bcb2ea',
+  light: '#5e48b7',
+  main: '#4A34B8',
+  dark: '#362396',
+  darker: '#2a1a6e',
   contrastText: '#FFFFFF',
 };
 
diff --git a/yarn.lock b/yarn.lock
index 2a4754b6..8ce68feb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3729,6 +3729,18 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tabler/icons-react@^3.11.0":
+  version "3.11.0"
+  resolved "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.11.0.tgz"
+  integrity sha512-xHNBi9mns1slvqos+7LkP3ube4CjWrANMbxMaorzwzO9J/+y1sAEG/sN8CV8FmtpYW/9/gDR+OWCjjLLg0RmAw==
+  dependencies:
+    "@tabler/icons" "3.11.0"
+
+"@tabler/icons@3.11.0":
+  version "3.11.0"
+  resolved "https://registry.npmjs.org/@tabler/icons/-/icons-3.11.0.tgz"
+  integrity sha512-/vZinJNvCYhdAB+RUsyCpanSPuOEKHHIZi4Uu0Bw7ilewHnQhCWUPrT704uHCRli2ROl7spADPmWzAqOganA5A==
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz"