Skip to content

Commit be1bc56

Browse files
Harsh2504Harsh2504
committed
Completed sidebar integration and small bugs
1 parent 9ace655 commit be1bc56

File tree

9 files changed

+257
-121
lines changed

9 files changed

+257
-121
lines changed

‎public/index.html

+8
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@
1010
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
1111
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin></script>
1212
<script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
13+
14+
<link
15+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
16+
rel="stylesheet"
17+
/>
18+
19+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
20+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
1321
</head>
1422

1523
<body>

‎src/App.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.App {
2-
text-align: center;
2+
33
}
44
.header{
55
width: 100%;

‎src/App.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function App() {
1717

1818
return (
1919
<div className="App">
20-
<div className="header"><h1>Shree Sadguru Traders</h1></div>
20+
{/* <div className="header"><h1>Shree Sadguru Traders</h1></div> */}
2121
<BrowserRouter>
2222
<Routes>
2323
<Route path="/" element={<Login setAuthMiddleware={setAuth} />} />

‎src/Components/Home.css

+110-106
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,169 @@
11

2-
body,
3-
html {
2+
body, html {
43
margin: 0;
54
padding: 0;
65
height: 100%;
76
font-size: 15px;
87
}
8+
.bord{
9+
border: 0px red solid;
10+
}
911

1012

11-
.sidebar {
12-
z-index: 9999999;
13+
.sidebar{
14+
1315
position: fixed;
14-
top: 0;
1516
background-color: var(--sidebar-color);
1617
overflow-x: hidden;
1718
overflow-y: hidden;
18-
transition: 0.5s;
19+
transition: ease-in-out 0.4s;
1920
padding-top: 1px;
2021
height: 100vh;
21-
width: 15vw;
22-
background-color: #ffffff;
23-
22+
width: 0px;
23+
background-color: #ffffff;
24+
2425
}
26+
.companytitle{
27+
margin-top: 10px;
28+
padding: 0px 30px;
2529

26-
.companytitle {
27-
padding: 0px 30px;
2830
}
29-
30-
.companytitle h4 {
31-
padding: 0px 30px;
32-
text-decoration: none;
33-
font-size: 15px;
34-
display: flex;
35-
align-items: center;
36-
color: rgb(255, 198, 118);
37-
38-
letter-spacing: 3px;
39-
line-height: 20px;
31+
.companytitle h4{
32+
font-family: Arial, Helvetica, sans-serif;
33+
padding: 0px 30px;
34+
text-decoration: none;
35+
font-size: 20px;
36+
font-weight: bolder;
37+
display: flex;
38+
align-items: center;
39+
color: rgb(255, 198, 118);
40+
letter-spacing: 3px;
41+
line-height: 20px;
4042
}
43+
.navi{
4144

42-
.nav {
43-
44-
margin-top: 40px;
45+
margin-top:40px;
4546

4647
}
4748

48-
.userinfo {
49-
padding: 10px 0px 0px 60px;
50-
margin: 0px 0px 30px 0px;
49+
.userinfo{
50+
padding: 10px 0px 0px 50px;
51+
margin: 0px 0px 30px 0px;
5152
}
5253

53-
.logout {
54-
position: absolute;
55-
bottom: 30px;
56-
margin-bottom: 0px;
57-
width: 100%;
54+
.logout{
55+
position: absolute;
56+
bottom: 30px;
57+
margin-bottom: 0px;
58+
width: 100%;
5859
}
59-
60-
.nav a {
60+
.sidenavi a {
6161
padding: 10px 20px 10px 20px;
6262
text-decoration: none;
6363
font-size: 15px;
64-
color: var(--text-color);
64+
color: rgb(66, 66, 66);
6565
display: flex;
6666
align-items: center;
6767
margin: 10px 20px;
6868
font-family: 'Poppins', sans-serif;
69-
letter-spacing: 3px;
70-
/* margin-left: 10px;
69+
letter-spacing: 3px;
70+
/* margin-left: 10px;
7171
margin-right: 10px;*/
72-
transition: 0.5s;
73-
74-
}
72+
transition: 0.2s;
7573

76-
.nav i {
77-
margin-right: 10px;
78-
/* Adjust the margin as needed */
79-
}
8074

81-
.logout a {
82-
padding: 10px 10px 10px 20px;
83-
text-decoration: none;
84-
font-size: 15px;
85-
color: var(--text-color);
86-
display: flex;
87-
align-items: center;
88-
margin: 10px 20px;
89-
font-family: 'Poppins', sans-serif;
90-
letter-spacing: 3px;
91-
transition: 0.5s;
75+
}
76+
.sidenavi i {
77+
margin-right: 10px; /* Adjust the margin as needed */
9278
}
9379

94-
.logout i {
95-
margin-right: 10px;
96-
/* Adjust the margin as needed */
97-
}
9880

99-
.profilepic {
100-
width: 100px;
101-
/* Set the width of the container */
102-
height: 100px;
103-
/* Set the height of the container */
104-
border-radius: 50%;
105-
/* Make it a circle by setting border-radius to 50% */
106-
overflow: hidden;
107-
/* Hide any content outside the circle */
81+
.profilepic{
82+
width: 100px; /* Set the width of the container */
83+
height: 100px; /* Set the height of the container */
84+
border-radius: 50%; /* Make it a circle by setting border-radius to 50% */
85+
overflow: hidden; /* Hide any content outside the circle */
10886
position: relative;
87+
left: 20px;
10988
/* Position property for absolute positioning of the image */
11089
}
111-
11290
.profilepic img {
113-
width: 100%;
114-
/* Make the image fill the container */
115-
height: auto;
116-
/* Maintain the aspect ratio of the image */
117-
border-radius: 0%;
118-
/* Ensure the image itself is also a circle */
119-
position: absolute;
120-
/* Position the image absolutely within the container */
91+
width: 100%; /* Make the image fill the container */
92+
height: auto; /* Maintain the aspect ratio of the image */
93+
border-radius: 0%; /* Ensure the image itself is also a circle */
94+
position: absolute;
95+
/* Position the image absolutely within the container */
96+
}
97+
.userinfo h4{
98+
margin-top: 10px;
99+
/* margin-left: -10px;*/
100+
}
101+
.userinfo p{
102+
margin-left: -20px;
103+
margin-top: -10px;
104+
color: #8e8e8e;
121105
}
122106

123-
.userinfo h4 {
124-
margin-top: 10px;
125-
/* margin-left: -10px;*/
107+
#ham{
108+
width: 30px;
109+
height: auto;
110+
126111
}
127112

128-
.userinfo p {
129-
margin-left: -20px;
130-
margin-top: -10px;
131-
color: #8e8e8e;
113+
.mainbody{
114+
transition: ease-in-out 0.4s;
115+
116+
background-color: #E9F1F7 ;
117+
height: 100vh;
118+
width: auto;
119+
padding: 20px;
132120
}
133121

122+
.sidenavi a.active{
123+
color: white ;
124+
text-decoration: none;
125+
background-color: #6837F4;
126+
border-radius: 8px;
127+
font-size: 18px;
128+
129+
}
134130

135-
.mainbody {
136131

137-
margin-left: 15vw;
138-
background-color: #E9F1F7;
139-
height: 100vh;
140-
width: auto;
141-
padding: 20px;
132+
.sidenavi a:not(.active):hover {
133+
color: #ffffff;
134+
text-decoration: none;
135+
border-radius: 8px;
136+
background-color: #6937f471;
137+
font-size: 18px;
142138
}
143139

144-
.nav a.active,
145-
.logout a.active {
146-
color: white;
147-
text-decoration: none;
148-
background-color: #6837F4;
149-
border-radius: 8px;
140+
.tab{
141+
margin: 30px;
142+
}
150143

144+
.rovhov tr td{
145+
background-color: transparent;
151146
}
152147

153-
.nav a:hover,
154-
.logout a:hover {
155-
color: #6837F4;
156-
text-decoration: none;
148+
.rovhov tr {
149+
transition: ease-in-out 0.3s;
157150
}
158151

159-
.tab {
160-
margin: 30px;
152+
.rovhov tr:hover {
153+
background-color: rgba(142, 142, 142, 0.173);
161154
}
162155

163-
.componentDisplayer{
164-
165-
}
156+
157+
.ham{
158+
font-size:30px;
159+
/*margin: 10px 15px;*/
160+
color: black;
161+
cursor:pointers;
162+
transition: all 0.2s ease;
163+
164+
}
165+
.ham:hover{
166+
font-size: 35px;
167+
color:rgb(255, 105, 105);
168+
}
169+

0 commit comments

Comments
 (0)