Skip to content

Commit ff748e3

Browse files
Quint-SQuint-S
committed
keyboard
1 parent 40e7499 commit ff748e3

File tree

6 files changed

+166
-141
lines changed

6 files changed

+166
-141
lines changed

‎src/App.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const AppContent = () => {
2424
<ThreeJsTorus />
2525
<div style={{
2626
display: 'flex',
27+
flexDirection: 'column',
2728
width: '100vw',
2829
height: '100vh',
2930
padding: '10px',
@@ -33,20 +34,22 @@ const AppContent = () => {
3334
position: 'relative',
3435
overflow: 'auto'
3536
}}>
36-
<I3StatusBar />
37+
<I3StatusBar />
3738
<Sidebar />
38-
<Routes>
39-
<Route path="/" element={<Home />} />
40-
<Route path="/blocks" element={<Blocks />} />
41-
<Route path="/transfers" element={<Transfers />} />
42-
<Route path="/accounts" element={<Accounts />} />
43-
<Route path="/agents" element={<Agents />} />
44-
<Route path="/extrinsics" element={<Extrinsics />} />
45-
<Route path="/events" element={<Events />} />
46-
<Route path="/account/:address" element={ <AccountDetails />} />
47-
<Route path="/extrinsic/:id" element={ <ExtrinsicDetails />} />
48-
<Route path="/block/:height" element={ <BlockDetails />} />
49-
</Routes>
39+
<div style={{ flex: 1, overflow: 'auto' }}>
40+
<Routes>
41+
<Route path="/" element={<Home />} />
42+
<Route path="/blocks" element={<Blocks />} />
43+
<Route path="/transfers" element={<Transfers />} />
44+
<Route path="/accounts" element={<Accounts />} />
45+
<Route path="/agents" element={<Agents />} />
46+
<Route path="/extrinsics" element={<Extrinsics />} />
47+
<Route path="/events" element={<Events />} />
48+
<Route path="/account/:address" element={ <AccountDetails />} />
49+
<Route path="/extrinsic/:id" element={ <ExtrinsicDetails />} />
50+
<Route path="/block/:height" element={ <BlockDetails />} />
51+
</Routes>
52+
</div>
5053
</div>
5154
</>
5255
);

‎src/components/CopyButton.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
22
import styled from 'styled-components';
33

44
const Button = styled.button`
5-
background: none;
65
border: none;
76
cursor: pointer;
87
padding: 0;
@@ -11,10 +10,12 @@ const Button = styled.button`
1110
align-items: center;
1211
transition: all 0.2s;
1312
text-shadow: 2px 2px 0 #363636;
14-
1513
//&:hover {
1614
// opacity: 0.8;
1715
//}
16+
&.terminal-cursor {
17+
text-shadow: none;
18+
}
1819
//
1920
//&:active {
2021
// transform: scale(0.95);

‎src/components/Sidebar.tsx‎

Lines changed: 53 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,45 @@ import styled from 'styled-components'
22
import { NavLink, useLocation } from 'react-router-dom'
33
import { useState, useEffect } from 'react';
44

5-
const SidebarContainer = styled.div<{ $isExpanded: boolean }>`
6-
width: ${props => props.$isExpanded ? '180px' : '30px'};
7-
padding: ${props => props.$isExpanded ? '16px' : '1px'};
5+
const SidebarContainer = styled.div`
6+
width: 100%;
7+
height: 30px;
8+
padding: 8px 16px;
89
border-radius: 2px;
910
border: 1px solid #0050a1;
10-
margin-right: 5px;
11-
transition: width 0.2s ease;
11+
margin-bottom: 5px;
12+
display: flex;
13+
flex-direction: row;
14+
align-items: center;
15+
gap: 16px;
1216
1317
&:focus {outline:0;}
1418
`
1519

16-
const NavItem = styled(NavLink)<{ $isExpanded: boolean }>`
17-
display: block;
18-
padding: ${props => props.$isExpanded ? '8px' : '1px'};
19-
margin: 4px 0;
20+
const NavItem = styled(NavLink)`
21+
//padding: 8px 16px;
2022
color: #e04bff;
2123
white-space: nowrap;
22-
overflow: hidden;
23-
text-overflow: ellipsis;
24+
//overflow: hidden;
25+
//text-overflow: ellipsis;
2426
25-
&:hover {
26-
translate: ${props => !props.$isExpanded ? "''" : "-8px"};
27-
text-decoration: none;
28-
}
29-
30-
&:hover:after {
31-
color: #535bf2;
32-
content: ']';
33-
}
34-
35-
&:hover:before {
36-
color: #535bf2;
37-
content: ${props => !props.$isExpanded ? "''" : "'['"};
38-
}
27+
//&:hover {
28+
// transform: translateX(-8px);
29+
// text-decoration: none;
30+
//}
31+
//
32+
//&:hover:after {
33+
// color: #535bf2;
34+
// content: ']';
35+
//}
36+
//
37+
//&:hover:before {
38+
// color: #535bf2;
39+
// content: '[';
40+
//}
3941
4042
&.hovered {
41-
translate: -8px;
43+
transform: translateX(-2px);
4244
}
4345
4446
&.hovered:after {
@@ -59,9 +61,8 @@ interface NavItemType {
5961

6062
export const Sidebar = () => {
6163
const [focusedIndex, setFocusedIndex] = useState(-1);
62-
const [isExpanded, setIsExpanded] = useState(false);
63-
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
6464
const location = useLocation();
65+
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
6566

6667
// Helper function to determine shortcut keys
6768
const determineShortcutKeys = (items: { to: string; label: string }[]): NavItemType[] => {
@@ -99,20 +100,9 @@ export const Sidebar = () => {
99100

100101
const navItems = determineShortcutKeys(baseNavItems);
101102

102-
// Add mobile detection
103103
useEffect(() => {
104104
setFocusedIndex(baseNavItems.findIndex(item => item.to === location.pathname));
105-
106-
const handleResize = () => {
107-
setIsMobile(window.innerWidth < 768);
108-
if (window.innerWidth >= 768) {
109-
setIsExpanded(true);
110-
}
111-
};
112-
113-
window.addEventListener('resize', handleResize);
114-
return () => window.removeEventListener('resize', handleResize);
115-
}, []);
105+
}, [location.pathname]);
116106

117107
// Global keyboard shortcuts
118108
useEffect(() => {
@@ -122,35 +112,33 @@ export const Sidebar = () => {
122112
return;
123113
}
124114

125-
if (!isMobile) {
126-
const pressedKey = e.key.toLowerCase();
127-
const matchingItem = navItems.find(item => item.shortcutKey === pressedKey);
128-
if (matchingItem) {
129-
setFocusedIndex(navItems.indexOf(matchingItem));
130-
const link = document.querySelector(`a[href="${matchingItem.to}"]`) as HTMLElement;
131-
link?.click();
132-
}
115+
const pressedKey = e.key.toLowerCase();
116+
const matchingItem = navItems.find(item => item.shortcutKey === pressedKey);
117+
if (matchingItem) {
118+
setFocusedIndex(navItems.indexOf(matchingItem));
119+
const link = document.querySelector(`a[href="${matchingItem.to}"]`) as HTMLElement;
120+
link?.click();
133121
}
134122
};
135123

136124
document.addEventListener('keydown', handleGlobalKeyDown);
137125
return () => document.removeEventListener('keydown', handleGlobalKeyDown);
138-
}, [navItems, isMobile]);
139-
//
140-
// const handleKeyDown = (e: React.KeyboardEvent) => {
141-
// if (e.key === 'ArrowDown') {
142-
// setFocusedIndex(prev => (prev + 1) % navItems.length);
143-
// } else if (e.key === 'ArrowUp') {
144-
// setFocusedIndex(prev => (prev - 1 + navItems.length) % navItems.length);
145-
// } else if (e.key === 'Enter') {
146-
// const link = document.getElementById(`nav-item-${focusedIndex}`);
147-
// link?.click();
148-
// }
149-
// };
126+
}, [navItems]);
127+
128+
useEffect(() => {
129+
const handleResize = () => {
130+
setIsMobile(window.innerWidth < 768);
131+
};
132+
133+
window.addEventListener('resize', handleResize);
134+
return () => window.removeEventListener('resize', handleResize);
135+
}, []);
150136

151137
const renderLabel = (label: string, shortcutKey: string) => {
138+
if (isMobile) return label;
139+
152140
const index = label.toLowerCase().indexOf(shortcutKey);
153-
if (index === -1 || isMobile) return label;
141+
if (index === -1) return label;
154142

155143
return (
156144
<>
@@ -162,26 +150,16 @@ export const Sidebar = () => {
162150
};
163151

164152
return (
165-
<SidebarContainer
166-
tabIndex={0}
167-
$isExpanded={isExpanded || !isMobile}
168-
onClick={() => isMobile && setIsExpanded(!isExpanded)}
169-
>
153+
<SidebarContainer tabIndex={0} className={'flex justify-between'}>
170154
{navItems.map((item, index) => (
171155
<NavItem
172156
key={item.to}
173-
onClick={(e) => {
174-
if(!isExpanded && isMobile){
175-
e.preventDefault()
176-
}
177-
setFocusedIndex(index);
178-
}}
157+
onClick={() => setFocusedIndex(index)}
179158
to={item.to}
180159
id={`nav-item-${index}`}
181-
className={focusedIndex === index && ((isMobile && isExpanded) || !isMobile) ? `hovered` : ''}
182-
$isExpanded={isExpanded || !isMobile}
160+
className={`${focusedIndex === index ? 'hovered' : ''} flex-1 text-center`}
183161
>
184-
{isMobile && !isExpanded ? item.label : renderLabel(item.label, item.shortcutKey)}
162+
{renderLabel(item.label, item.shortcutKey)}
185163
</NavItem>
186164
))}
187165
</SidebarContainer>

‎src/components/TerminalWindow.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,13 @@ interface Tab {
6363
color: ${({ active }) => active ? '#fff' : '#00c4ff'};
6464
cursor: pointer;
6565
transition: all 0.1s;
66+
67+
&.terminal-cursor {
68+
background-color: rgba(0, 170, 0, 0.9);
69+
text-shadow: none;
70+
color: black;
71+
}
72+
6673
6774
&:hover {
6875
background-color: #0050a1;

0 commit comments

Comments
 (0)