Skip to content

Commit d25f36b

Browse files
lihebilihebi
authored
Improve UI (nav bar and canvas sidebar) (#34)
* clean up app header/nav UI * clean up sidebar; fix canvas 100vh * disconnect socket when trying to connect, instead of skip
1 parent 0269edf commit d25f36b

File tree

10 files changed

+183
-278
lines changed

10 files changed

+183
-278
lines changed

‎compose/dev/compose.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ services:
4242
ui:
4343
image: node:18
4444
working_dir: /app
45+
ports:
46+
# For react hot-reloading in development.
47+
- 3000:3000
4548
volumes:
4649
- ../../ui:/app
4750
- ui-node-modules:/app/node_modules

‎ui/src/App.tsx

Lines changed: 94 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import "./App.css";
22

3-
import { HashRouter as Router, Routes, Route } from "react-router-dom";
3+
import {
4+
createBrowserRouter,
5+
createRoutesFromElements,
6+
Route,
7+
RouterProvider,
8+
} from "react-router-dom";
9+
10+
import { createTheme, ThemeProvider } from "@mui/material/styles";
411

512
import Home from "./pages/index";
613
import About from "./pages/about";
@@ -19,8 +26,6 @@ import { SnackbarProvider } from "notistack";
1926

2027
import Docs from "./pages/docs";
2128

22-
import { createTheme, ThemeProvider } from "@mui/material/styles";
23-
2429
const theme = createTheme({
2530
typography: {
2631
button: {
@@ -34,103 +39,100 @@ function NormalLayout({ children }: any) {
3439
<Box>
3540
<Header />
3641
<Box pt="50px">{children}</Box>
37-
<Footer />
42+
{/* <Footer /> */}
3843
</Box>
3944
);
4045
}
4146

42-
function App() {
47+
const router = createBrowserRouter([
48+
{
49+
path: "docs",
50+
element: (
51+
<NormalLayout>
52+
<Docs />
53+
</NormalLayout>
54+
),
55+
},
56+
{
57+
path: "repos",
58+
element: (
59+
<NormalLayout>
60+
<Repos />
61+
</NormalLayout>
62+
),
63+
},
64+
{
65+
path: "repo/:id",
66+
element: (
67+
<Box height="100vh">
68+
<Header />
69+
<Box
70+
height="100%"
71+
boxSizing={"border-box"}
72+
sx={{
73+
pt: "50px",
74+
}}
75+
>
76+
<Repo />
77+
</Box>
78+
</Box>
79+
),
80+
},
81+
{
82+
path: "login",
83+
element: (
84+
<NormalLayout>
85+
<Login />
86+
</NormalLayout>
87+
),
88+
},
89+
{
90+
path: "signup",
91+
element: (
92+
<NormalLayout>
93+
<Signup />
94+
</NormalLayout>
95+
),
96+
},
97+
{
98+
path: "profile",
99+
element: (
100+
<NormalLayout>
101+
<Profile />
102+
</NormalLayout>
103+
),
104+
},
105+
{
106+
path: "about",
107+
element: (
108+
<NormalLayout>
109+
<About />
110+
</NormalLayout>
111+
),
112+
},
113+
{
114+
path: "/",
115+
element: (
116+
<NormalLayout>
117+
{/* <Home /> */}
118+
<Repos />
119+
</NormalLayout>
120+
),
121+
},
122+
]);
123+
124+
export default function App() {
43125
return (
44-
<Router>
45-
<ThemeProvider theme={theme}>
46-
<AuthProvider>
47-
<SnackbarProvider maxSnack={5}>
48-
<Routes>
49-
<Route
50-
path="/about"
51-
element={
52-
<NormalLayout>
53-
<About />
54-
</NormalLayout>
55-
}
56-
/>
57-
<Route
58-
path="/docs"
59-
element={
60-
<NormalLayout>
61-
<Docs />
62-
</NormalLayout>
63-
}
64-
></Route>
65-
<Route
66-
path="/repos"
67-
element={
68-
<NormalLayout>
69-
<Repos />
70-
</NormalLayout>
71-
}
72-
></Route>
73-
<Route
74-
path="/repo/:id"
75-
element={
76-
<Box height="100vh">
77-
<Header />
78-
<Box height="100%" pt="50px">
79-
<Repo />
80-
</Box>
81-
</Box>
82-
}
83-
></Route>
84-
<Route
85-
path="/test"
86-
element={
87-
<NormalLayout>
88-
<Test />
89-
</NormalLayout>
90-
}
91-
></Route>
92-
<Route
93-
path="/login"
94-
element={
95-
<NormalLayout>
96-
<Login />
97-
</NormalLayout>
98-
}
99-
></Route>
100-
<Route
101-
path="/signup"
102-
element={
103-
<NormalLayout>
104-
<Signup />
105-
</NormalLayout>
106-
}
107-
></Route>
108-
<Route
109-
path="/profile"
110-
element={
111-
<NormalLayout>
112-
<Profile />
113-
</NormalLayout>
114-
}
115-
></Route>
116-
<Route
117-
path="/"
118-
element={
119-
<NormalLayout>
120-
<Home />
121-
</NormalLayout>
122-
}
123-
></Route>
124-
</Routes>
125-
</SnackbarProvider>
126-
</AuthProvider>
127-
</ThemeProvider>
128-
</Router>
126+
<ThemeProvider theme={theme}>
127+
<AuthProvider>
128+
<SnackbarProvider maxSnack={5}>
129+
<RouterProvider router={router} />
130+
</SnackbarProvider>
131+
</AuthProvider>
132+
</ThemeProvider>
129133
);
130134
}
131135

132-
export default App;
133-
134136
// function App() {
135137
// return (
136138
// <div className="App">

‎ui/src/components/Header.tsx

Lines changed: 25 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import IconButton from "@mui/material/IconButton";
1717
import Typography from "@mui/material/Typography";
1818
import Container from "@mui/material/Container";
1919
import Tooltip from "@mui/material/Tooltip";
20-
20+
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
2121
import AppBar from "@mui/material/AppBar";
2222

2323
import { useAuth } from "../lib/auth";
@@ -133,38 +133,27 @@ export function Header() {
133133
</Typography>
134134

135135
{/* The navigation on desktop */}
136-
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
137-
<Link
138-
to="/repos"
139-
component={ReactLink}
140-
underline="none"
141-
sx={{ mx: 2 }}
142-
>
143-
Repos
144-
</Link>
145-
<Link
146-
to="/test"
147-
component={ReactLink}
148-
underline="none"
149-
sx={{ mx: 2 }}
150-
>
151-
Test
152-
</Link>
153-
<Link
154-
to="/docs"
155-
component={ReactLink}
156-
underline="none"
157-
sx={{ mx: 2 }}
158-
>
159-
Docs
160-
</Link>
136+
<Box
137+
sx={{
138+
flexGrow: 1,
139+
display: { xs: "none", md: "flex" },
140+
alignItems: "center",
141+
}}
142+
>
161143
<Link
162-
to="/about"
163-
component={ReactLink}
144+
href="https://codepod.io"
145+
target="_blank"
164146
underline="none"
165-
sx={{ mx: 2 }}
147+
sx={{
148+
mx: 2,
149+
display: "flex",
150+
}}
151+
alignItems="center"
152+
// alignContent="center"
153+
// textAlign={"center"}
166154
>
167-
About
155+
{/* <span>Docs</span> */}
156+
Docs <OpenInNewIcon fontSize="small" sx={{ ml: "1px" }} />
168157
</Link>
169158
</Box>
170159

@@ -176,7 +165,11 @@ export function Header() {
176165
alignItems: "center",
177166
}}
178167
>
179-
<Box>{me?.firstname}</Box>
168+
<Box sx={{ mr: 2 }}>
169+
<Link component={ReactLink} to="/profile" underline="none">
170+
{me?.firstname}
171+
</Link>
172+
</Box>
180173
<Button
181174
onClick={() => {
182175
signOut();
@@ -212,7 +205,7 @@ export function Footer() {
212205
sx={{
213206
display: "flex",
214207
mb: 8,
215-
p: 8,
208+
px: 8,
216209
alignItems: "center",
217210
justifyContent: "space-between",
218211
flexWrap: "wrap",

0 commit comments

Comments
 (0)