Skip to content

Commit 67eb74e

Browse files
rupnil-codesrupnil-codes
committed
(v0.1.5.2-alpha) Explorer Sidebar
You gotta trust me when i say i took 2 hours to make this sidebar MY GODD. Also when u test it on the site you'll know why I took 2 hours. I just did the designing part of this today as Im having exams. Tmrw ig ill make the main content page and the details tab.
1 parent 37ffc51 commit 67eb74e

File tree

6 files changed

+195
-14
lines changed

6 files changed

+195
-14
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,4 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
2727
- [X] OPTIMIZATION: Have ONLY App.js with all the necessary variables so that we do not need to manually add apps to each part. (Done in v0.1.4.5)
2828
- [X] OPTIMIZATION: (TruthEntity) thinks it is better to use React component than Iframes, as they are quite a memory hogger and a can degrade performance. (Done in v0.1.4.5)
2929
- [-] Make the system tray on the taskbar(right) more accurate to windows. (Partially Done in v0.1.5.1 The text doesn't match rn)
30-
- [-] Explorer App. (Started in v0.1.5.1)
30+
- [-] Explorer App. (Started in v0.1.5.1). Sidebar (v0.1.5.2)

‎src/apps/explorer.jsx‎

Lines changed: 70 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,22 @@ function Explorer() {
1515

1616
return (
1717
<>
18-
<div className="explorer">
18+
<div className="explorer-app">
1919
<div className="explorer-navigation">
2020
<div className="explorer-navigation-bar">
2121
<div className={"explorer-navigation-icons"}>
22-
<MoveLeft size={18} strokeWidth={1.5} />
23-
<MoveRight size={18} strokeWidth={1.5} />
24-
<MoveUp size={18} strokeWidth={1.5} />
25-
<RotateCw size={18} strokeWidth={1.5} />
22+
<div className={"explorer-navigation-icons-container"}>
23+
<MoveLeft size={18} strokeWidth={1.5} />
24+
</div>
25+
<div className={"explorer-navigation-icons-container"}>
26+
<MoveRight size={18} strokeWidth={1.5} />
27+
</div>
28+
<div className={"explorer-navigation-icons-container"}>
29+
<MoveUp size={18} strokeWidth={1.5} />
30+
</div>
31+
<div className={"explorer-navigation-icons-container"}>
32+
<RotateCw size={18} strokeWidth={1.5} />
33+
</div>
2634
</div>
2735
<div className={"explorer-navigation-search"}>
2836
<div className={"explorer-dir"}>
@@ -40,7 +48,63 @@ function Explorer() {
4048
</div>
4149
<div className="explorer-content">
4250
<div className="explorer-sidebar">
43-
<p>Sidebar</p>
51+
<div className={"explorer-sidebar-container"}>
52+
<div className={"explorer-sidebar-icon-container sidebar-home-icon"}>
53+
<p className={"explorer-sidebar-text"}>Home</p>
54+
</div>
55+
</div>
56+
<div className={"explorer-sidebar-container"}>
57+
<div className={"explorer-sidebar-icon-container sidebar-onedrive-icon"}>
58+
<p className={"explorer-sidebar-text"}>OneDrive</p>
59+
</div>
60+
</div>
61+
62+
<div className={"explorer-sidebar-separator"}><p>‎</p></div>
63+
64+
<div className={"explorer-sidebar-container"}>
65+
<div className={"explorer-sidebar-icon-container sidebar-desktop-icon"}>
66+
<p className={"explorer-sidebar-text"}>Desktop</p>
67+
</div>
68+
</div>
69+
<div className={"explorer-sidebar-container"}>
70+
<div className={"explorer-sidebar-icon-container sidebar-downloads-icon"}>
71+
<p className={"explorer-sidebar-text"}>Downloads</p>
72+
</div>
73+
</div>
74+
<div className={"explorer-sidebar-container"}>
75+
<div className={"explorer-sidebar-icon-container sidebar-documents-icon"}>
76+
<p className={"explorer-sidebar-text"}>Documents</p>
77+
</div>
78+
</div>
79+
<div className={"explorer-sidebar-container"}>
80+
<div className={"explorer-sidebar-icon-container sidebar-music-icon"}>
81+
<p className={"explorer-sidebar-text"}>Music</p>
82+
</div>
83+
</div>
84+
<div className={"explorer-sidebar-container"}>
85+
<div className={"explorer-sidebar-icon-container sidebar-pictures-icon"}>
86+
<p className={"explorer-sidebar-text"}>Pictures</p>
87+
</div>
88+
</div>
89+
<div className={"explorer-sidebar-container"}>
90+
<div className={"explorer-sidebar-icon-container sidebar-videos-icon"}>
91+
<p className={"explorer-sidebar-text"}>Videos</p>
92+
</div>
93+
</div>
94+
95+
<div className={"explorer-sidebar-separator"}><p>‎</p></div>
96+
97+
<div className={"explorer-sidebar-container"}>
98+
<div className={"explorer-sidebar-icon-container sidebar-this-pc-icon"}>
99+
<p className={"explorer-sidebar-text"}>This PC</p>
100+
</div>
101+
</div>
102+
<div className={"explorer-sidebar-container"}>
103+
<div className={"explorer-sidebar-icon-container sidebar-network-icon"}>
104+
<p className={"explorer-sidebar-text"}>Network</p>
105+
</div>
106+
</div>
107+
44108
</div>
45109
<div className="explorer-main">
46110
<p>Main files bruv</p>

‎src/core/WindowManager.jsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -141,9 +141,7 @@ export default function AppWindow({
141141
</div>
142142
</div>
143143

144-
<div className={"app-component"}>
145-
< AppComponent />
146-
</div>
144+
< AppComponent />
147145
</div>
148146
</Rnd>
149147
);

‎src/styles/apps/explorer.css‎

Lines changed: 121 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11

2+
.explorer-app {
3+
height: 100%;
4+
overflow: auto;
5+
}
6+
27
.explorer-navigation {
38
display: flex;
49
flex-direction: column;
@@ -33,7 +38,21 @@
3338
flex-direction: row;
3439
align-items: center;
3540
justify-content: center;
36-
gap: 1.5rem;
41+
gap: 0.97rem;
42+
}
43+
.explorer-navigation-icons-container {
44+
display: flex;
45+
flex-direction: column;
46+
align-items: center;
47+
justify-content: center;
48+
49+
padding: 0.53rem;
50+
border-radius: 0.3rem;
51+
52+
transition: background-color var(--hover-animation) var(--hover-animation-type);
53+
}
54+
.explorer-navigation-icons-container:hover {
55+
background-color: var(--border);
3756
}
3857

3958
.explorer-navigation-search {
@@ -84,11 +103,110 @@
84103
}
85104

86105

106+
87107
.explorer-content {
108+
height: calc(100% - 3.625rem);
109+
88110
display: flex;
89111
flex-direction: row;
90-
align-items: center;
91112
justify-content: space-between;
113+
}
114+
115+
.explorer-sidebar {
116+
overflow: auto;
117+
display: flex;
118+
flex-direction: column;
119+
align-items: center;
120+
/*justify-content: center;*/
121+
width: 10rem;
122+
max-width: 20%;
123+
/*height: 100%;*/
124+
125+
padding-top: 0.5rem;
126+
127+
border-right: 1px solid var(--border);
128+
}
129+
130+
.explorer-sidebar-container{
131+
display: flex;
132+
flex-direction: column;
133+
/*align-items: center;*/
134+
justify-content: center;
135+
136+
border: 1px solid transparent;
137+
138+
139+
padding: 0.4rem;
140+
width: calc(100% - 1.5rem);
141+
142+
border-radius: 0.2rem;
143+
144+
transition: background-color var(--hover-animation) var(--hover-animation-type);
145+
}
146+
.explorer-sidebar-container:hover {
147+
/*border: 1px solid var(--border);*/
148+
background-color: var(--border);
149+
}
150+
151+
.explorer-sidebar-icon-container {
152+
background-repeat: no-repeat;
153+
background-position: left;
154+
background-origin: content-box;
155+
background-size: contain;
156+
margin-left: 20%;
157+
display: flex;
158+
align-items: center;
159+
height: 1rem;
160+
}
161+
.sidebar-home-icon {
162+
background-image: url("../../assets/icons/Home.ico");
163+
}
164+
.sidebar-onedrive-icon {
165+
background-image: url("../../assets/icons/One Drive.ico");
166+
}
167+
168+
.sidebar-desktop-icon {
169+
background-image: url("../../assets/icons/Desktop.ico");
170+
}
171+
.sidebar-downloads-icon {
172+
background-image: url("../../assets/icons/Folder Downloads.ico");
173+
}
174+
.sidebar-documents-icon {
175+
background-image: url("../../assets/icons/Folder Documents.ico");
176+
}
177+
.sidebar-music-icon {
178+
background-image: url("../../assets/icons/Folder Music.ico");
179+
}
180+
.sidebar-pictures-icon {
181+
background-image: url("../../assets/icons/Folder Pictures.ico");
182+
}
183+
.sidebar-videos-icon {
184+
background-image: url("../../assets/icons/Folder Videos.ico");
185+
}
186+
187+
.sidebar-this-pc-icon{
188+
background-image: url("../../assets/icons/Computer.ico");
189+
}
190+
.sidebar-network-icon{
191+
background-image: url("../../assets/icons/Network.ico");
192+
}
193+
194+
.explorer-sidebar-text {
195+
padding-left: 1.4rem;
196+
font-size: 12px;
197+
}
198+
199+
.explorer-sidebar-separator {
200+
display: flex;
201+
flex-direction: row;
202+
align-items: center;
203+
justify-content: center;
204+
gap: 0.75rem;
205+
206+
height: 1px;
207+
width: 80%;
208+
background-color: var(--border);
92209

93-
margin: 1rem ;
210+
margin-top: 0.75rem;
211+
margin-bottom: 0.75rem;
94212
}

‎src/styles/core/WindowManager.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,5 +63,6 @@
6363
}
6464

6565
.app-component {
66+
height: 100%;
6667
overflow: hidden;
6768
}

‎src/styles/variables.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,5 +49,5 @@
4949

5050
--animation-time: 1s;
5151
--hover-animation: 0.2s;
52-
--hover-animation-type: ease;
52+
--hover-animation-type: ease-in-out;
5353
}

0 commit comments

Comments
 (0)