Skip to content

Commit 62ee65a

Browse files
simmmplewebsimmmpleweb
committed
Free finished
1 parent cc88398 commit 62ee65a

File tree

10 files changed

+103
-112
lines changed

10 files changed

+103
-112
lines changed

‎src/app/admin/layout.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,12 @@ import Footer from 'components/footer/Footer';
1616

1717
export default function Admin({ children }: { children: React.ReactNode }) {
1818
// states and functions
19-
const [fixed] = useState(false);
2019
const [open, setOpen] = useState(false);
21-
const [hovered, setHovered] = useState(false);
2220
const pathname = usePathname();
2321
if (isWindowAvailable()) document.documentElement.dir = 'ltr';
2422
return (
2523
<div className="flex h-full w-full bg-background-100 dark:bg-background-900">
26-
<Sidebar
27-
routes={routes}
28-
open={open}
29-
setOpen={() => setOpen(!open)}
30-
variant="admin"
31-
/>
24+
<Sidebar routes={routes} open={open} setOpen={setOpen} variant="admin" />
3225
{/* Navbar & Main Content */}
3326
<div className="h-full w-full font-dm dark:bg-navy-900">
3427
{/* Main Content */}

‎src/components/navbar/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ const Navbar = (props: {
135135
<div className="flex w-[350px] flex-col gap-2 rounded-[20px] bg-white p-4 shadow-xl shadow-shadow-500 dark:!bg-navy-700 dark:text-white dark:shadow-none">
136136
<div
137137
style={{
138-
backgroundImage: `url(${navbarimage})`,
138+
backgroundImage: `url(${navbarimage.src})`,
139139
backgroundRepeat: 'no-repeat',
140140
backgroundSize: 'cover',
141141
}}

‎src/components/sidebar/RTL.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
renderThumb,
99
renderTrack,
1010
renderView,
11-
renderViewMini,
1211
} from 'components/scrollbar/Scrollbar';
1312
import { Scrollbars } from 'react-custom-scrollbars-2';
1413
import avatar4 from '/public/img/avatars/avatar4.png';
@@ -39,13 +38,7 @@ function SidebarHorizon(props: { variant?: string; [x: string]: any }) {
3938
autoHide
4039
renderTrackVertical={renderTrack}
4140
renderThumbVertical={renderThumb}
42-
renderView={
43-
mini === false
44-
? renderView
45-
: mini === true && hovered === true
46-
? renderView
47-
: renderViewMini
48-
}
41+
renderView={renderView}
4942
>
5043
<div className="flex h-full flex-col justify-between">
5144
<div>
@@ -82,13 +75,13 @@ function SidebarHorizon(props: { variant?: string; [x: string]: any }) {
8275
<div className="mb-7 mt-[58px] h-px bg-gray-200 dark:bg-white/10" />
8376
{/* Nav item */}
8477
<ul>
85-
<Links mini={mini} hovered={hovered} routes={routes} />
78+
<Links routes={routes} />
8679
</ul>
8780
</div>
8881
{/* Free Horizon Card */}
8982
<div className="mb-[30px] mt-[28px]">
9083
<div className="flex justify-center">
91-
<SidebarCard mini={mini} hovered={hovered} />
84+
<SidebarCard />
9285
</div>
9386
{/* Sidebar profile info */}
9487
<div className="mt-5 flex items-center justify-center gap-3">

‎src/components/sidebar/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ function SidebarHorizon(props: { routes: IRoute[]; [x: string]: any }) {
1010
const { routes, open, setOpen } = props;
1111
return (
1212
<div
13-
className={`sm:none duration-175 linear fixed !z-50 flex min-h-full flex-col bg-white pb-10 shadow-2xl shadow-white/5 transition-all dark:!bg-navy-800 dark:text-white md:!z-50 lg:!z-50 xl:!z-0`}
13+
className={`sm:none duration-175 linear fixed !z-50 flex min-h-full flex-col bg-white pb-10 shadow-2xl shadow-white/5 transition-all dark:!bg-navy-800 dark:text-white md:!z-50 lg:!z-50 xl:!z-0 ${
14+
open ? 'translate-x-0' : '-translate-x-96 xl:translate-x-0'
15+
}`}
1416
>
1517
<span
1618
className="absolute right-4 top-4 block cursor-pointer xl:hidden"

‎src/styles/MiniCalendar.css‎

Lines changed: 73 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,157 @@
1-
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
1+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
22
/* LIGHT MODE + GENERAL */
33

44
.react-calendar {
5-
border: unset;
6-
background-color: transparent;
7-
font-family: "DM Sans", sans-serif;
5+
border: 0px solid !important;
6+
background-color: transparent;
7+
font-family: 'DM Sans', sans-serif;
88
}
99
.react-calendar__navigation__prev2-button {
10-
display: none;
10+
display: none;
1111
}
1212
.react-calendar__navigation__next2-button {
13-
display: none;
13+
display: none;
1414
}
1515
.react-calendar__navigation {
16-
align-items: center;
16+
align-items: center;
1717
}
1818
abbr[title] {
19-
border-bottom: none;
20-
-webkit-text-decoration: unset;
21-
text-decoration: unset;
22-
-webkit-text-decoration: unset;
23-
-webkit-text-decoration: unset;
24-
text-decoration: unset !important;
19+
border-bottom: none;
20+
-webkit-text-decoration: unset;
21+
text-decoration: unset;
22+
-webkit-text-decoration: unset;
23+
-webkit-text-decoration: unset;
24+
text-decoration: unset !important;
2525
}
2626
.react-calendar__navigation__prev-button {
27-
background-color: #4318ff !important;
28-
border-radius: 10px;
29-
min-width: 34px !important;
30-
height: 34px !important;
31-
color: white;
27+
background-color: #4318ff !important;
28+
border-radius: 10px;
29+
min-width: 34px !important;
30+
height: 34px !important;
31+
color: white;
3232
}
3333
.react-calendar__navigation__next-button {
34-
background-color: #4318ff !important;
35-
border-radius: 10px;
36-
min-width: 34px !important;
37-
width: 34px !important;
38-
height: 34px !important;
39-
color: white;
34+
background-color: #4318ff !important;
35+
border-radius: 10px;
36+
min-width: 34px !important;
37+
width: 34px !important;
38+
height: 34px !important;
39+
color: white;
4040
}
4141
.react-calendar__navigation__label {
42-
font-weight: 700 !important;
43-
font-size: 18px;
42+
font-weight: 700 !important;
43+
font-size: 18px;
4444
}
4545
.react-calendar__navigation__label:hover,
4646
.react-calendar__navigation__label:focus {
47-
background-color: unset !important;
48-
border-radius: 10px;
47+
background-color: unset !important;
48+
border-radius: 10px;
4949
}
5050
.react-calendar__tile {
51-
font-size: 12px;
52-
display: flex;
53-
align-items: center;
54-
justify-content: center;
55-
padding: 0px !important;
56-
height: 34px !important;
57-
color: #1b2559;
51+
font-size: 12px;
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
padding: 0px !important;
56+
height: 34px !important;
57+
color: #1b2559;
5858
}
5959
.react-calendar__month-view__weekdays {
60-
background-color: #f4f7fe;
61-
border-radius: 10px;
62-
margin-bottom: 6px;
60+
background-color: #f4f7fe;
61+
border-radius: 10px;
62+
margin-bottom: 6px;
6363
}
6464
.react-calendar__tile--now,
6565
.react-calendar__tile--now:enabled:hover,
6666
.react-calendar__tile--now:enabled:focus {
67-
background-color: #f4f7fe;
68-
border-radius: 10px;
67+
background-color: #f4f7fe;
68+
border-radius: 10px;
6969
}
7070
.react-calendar__month-view__days__day--neighboringMonth {
71-
color: #b0bbd5;
71+
color: #b0bbd5;
7272
}
7373
.react-calendar__tile--active,
7474
.react-calendar__tile--active:enabled:hover,
7575
.react-calendar__tile--active:enabled:focus {
76-
background: #4318ff;
77-
border-radius: 10px;
78-
color: white;
76+
background: #4318ff;
77+
border-radius: 10px;
78+
color: white;
7979
}
8080
.react-calendar__tile--range,
8181
.react-calendar__tile--range:enabled:hover,
8282
.react-calendar__tile--range:enabled:focus {
83-
background: #f4f7fe;
84-
color: #4318ff;
85-
border-radius: 0px;
83+
background: #f4f7fe;
84+
color: #4318ff;
85+
border-radius: 0px;
8686
}
8787
.react-calendar__tile--rangeStart,
8888
.react-calendar__tile--rangeStart:enabled:hover,
8989
.react-calendar__tile--rangeStart:enabled:focus {
90-
background: #4318ff;
91-
border-top-left-radius: 10px;
92-
border-bottom-left-radius: 10px;
93-
color: white;
90+
background: #4318ff;
91+
border-top-left-radius: 10px;
92+
border-bottom-left-radius: 10px;
93+
color: white;
9494
}
9595
.react-calendar__tile--rangeEnd,
9696
.react-calendar__tile--rangeEnd:enabled:hover,
9797
.react-calendar__tile--rangeEnd:enabled:focus {
98-
background: #4318ff;
99-
border-top-right-radius: 10px;
100-
border-bottom-right-radius: 10px;
101-
color: white;
98+
background: #4318ff;
99+
border-top-right-radius: 10px;
100+
border-bottom-right-radius: 10px;
101+
color: white;
102102
}
103103

104104
/* DARK MODE */
105105

106106
body.dark .react-calendar {
107-
border-radius: 30px;
107+
border-radius: 30px;
108108
}
109109
body.dark .react-calendar__navigation__prev-button {
110-
background-color: #7551ff !important;
110+
background-color: #7551ff !important;
111111
}
112112
body.dark .react-calendar__navigation__next-button {
113-
background-color: #7551ff !important;
114-
color: white;
113+
background-color: #7551ff !important;
114+
color: white;
115115
}
116116
body.dark .react-calendar__tile {
117-
color: white;
117+
color: white;
118118
}
119119
body.dark .react-calendar__tile:enabled:hover,
120120
body.dark .react-calendar__tile:enabled:focus {
121-
background-color: rgba(255, 255, 255, 0.1);
121+
background-color: rgba(255, 255, 255, 0.1);
122122
}
123123
body.dark .react-calendar__month-view__weekdays {
124-
background-color: rgba(255, 255, 255, 0.1);
124+
background-color: rgba(255, 255, 255, 0.1);
125125
}
126126
body.dark .react-calendar__tile--now,
127127
body.dark .react-calendar__tile--now:enabled:hover,
128128
body.dark .react-calendar__tile--now:enabled:focus {
129-
background-color: rgba(255, 255, 255, 0.1);
129+
background-color: rgba(255, 255, 255, 0.1);
130130
}
131131
body.dark .react-calendar__month-view__days__day--neighboringMonth {
132-
color: #b0bbd5;
132+
color: #b0bbd5;
133133
}
134134
body.dark .react-calendar__tile--active,
135135
body.dark .react-calendar__tile--active:enabled:hover,
136136
body.dark .react-calendar__tile--active:enabled:focus {
137-
background: #7551ff;
138-
color: white;
137+
background: #7551ff;
138+
color: white;
139139
}
140140
body.dark .react-calendar__tile--range,
141141
body.dark .react-calendar__tile--range:enabled:hover,
142142
body.dark .react-calendar__tile--range:enabled:focus {
143-
background: rgba(255, 255, 255, 0.1);
144-
color: #7551ff;
143+
background: rgba(255, 255, 255, 0.1);
144+
color: #7551ff;
145145
}
146146
body.dark .react-calendar__tile--rangeStart,
147147
body.dark .react-calendar__tile--rangeStart:enabled:hover,
148148
body.dark .react-calendar__tile--rangeStart:enabled:focus {
149-
background: #7551ff;
150-
color: white;
149+
background: #7551ff;
150+
color: white;
151151
}
152152
body.dark .react-calendar__tile--rangeEnd,
153153
body.dark .react-calendar__tile--rangeEnd:enabled:hover,
154154
body.dark .react-calendar__tile--rangeEnd:enabled:focus {
155-
background: #7551ff;
156-
color: white;
157-
}
155+
background: #7551ff;
156+
color: white;
157+
}

‎src/styles/index.css‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,29 @@
99
font-family: 'DM Sans', sans-serif !important;
1010
font-feature-settings: 'kern' !important;
1111
-webkit-font-smoothing: antialiased;
12-
letter-spacing: -0.5px;
12+
letter-spacing: -0.2px;
1313
}
1414
}
15+
input.defaultCheckbox {
16+
color: white;
17+
}
1518

1619
input.defaultCheckbox::before {
17-
content: url(../styles/public/svg/checked.svg);
18-
color: white;
20+
content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66662 10.115L12.7946 3.98633L13.7379 4.92899L6.66662 12.0003L2.42395 7.75766L3.36662 6.81499L6.66662 10.115Z' fill='white'/%3E%3C/svg%3E%0A");
21+
fill: currentColor;
1922
opacity: 0;
2023
height: 16px;
2124
width: 16px;
25+
top: 0;
2226
position: absolute;
2327
left: 50%;
2428
transform: translate(-50%, 0px);
2529
}
2630

31+
input.defaultCheckbox::before path {
32+
fill: currentColor;
33+
}
34+
2735
input:checked.defaultCheckbox::before {
2836
opacity: 1;
2937
}

‎src/styles/public/svg/checked.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/types/hui-types.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ declare global {
55
* Now declare things that go in the global namespace,
66
* or augment existing declarations in the global namespace.
77
*/
8+
89
interface RoutesType {
910
name: string;
1011
layout: string;
11-
component: JSX.Element;
1212
icon: JSX.Element | string;
1313
path: string;
14-
secondary?: boolean;
14+
secondary?: boolean | undefined;
1515
}
1616
}

‎src/types/navigation.d.ts‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
11
import { ComponentType, Element } from 'react';
22

33
export interface IRoute {
4-
path?: string;
5-
name?: string;
6-
layout?: string;
7-
exact?: boolean;
8-
component?: ComponentType | (() => JSX.Element);
9-
icon?: ComponentType | string | Element | JSX.Element;
10-
secondary?: boolean;
11-
collapse?: boolean;
12-
items?: RoutesType[];
4+
name: string;
5+
layout: string;
6+
icon: JSX.Element | string;
7+
path: string;
8+
secondary?: boolean | undefined;
139
}
1410
interface RoutesType {
1511
name: string;
1612
layout: string;
17-
component: JSX.Element;
1813
icon: JSX.Element | string;
1914
path: string;
20-
secondary?: boolean;
15+
secondary?: boolean | undefined;
2116
}

0 commit comments

Comments
 (0)