Skip to content

Commit a5bc566

Browse files
jh-488jh-488
committed
add navbar
1 parent 40954a7 commit a5bc566

4 files changed

Lines changed: 185 additions & 0 deletions

File tree

‎src/server/public/assets/icon.svg‎

Lines changed: 82 additions & 0 deletions
Loading

‎src/server/public/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,18 @@
77
<link rel="stylesheet" href="/styles.css" />
88
</head>
99
<body>
10+
<nav class="navbar">
11+
<div class="navbar-container">
12+
<a href="/" class="navbar-brand">
13+
<img src="./assets/icon.svg" alt="LiaScript" />
14+
</a>
15+
<ul class="navbar-menu">
16+
<li><a href="/" class="navbar-link active">Home</a></li>
17+
<li><a href="/status.html" class="navbar-link">Status</a></li>
18+
</ul>
19+
</div>
20+
</nav>
21+
1022
<div class="container">
1123
<header>
1224
<h1>LiaScript Exporter</h1>

‎src/server/public/status.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,18 @@
5151
</style>
5252
</head>
5353
<body>
54+
<nav class="navbar">
55+
<div class="navbar-container">
56+
<a href="/" class="navbar-brand">
57+
<img src="./assets/icon.svg" alt="LiaScript" />
58+
</a>
59+
<ul class="navbar-menu">
60+
<li><a href="/" class="navbar-link">Home</a></li>
61+
<li><a href="/status.html" class="navbar-link active">Status</a></li>
62+
</ul>
63+
</div>
64+
</nav>
65+
5466
<div class="container">
5567
<header>
5668
<h1>Export Status</h1>

‎src/server/public/styles.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,69 @@ body {
3434
line-height: 1.6;
3535
}
3636

37+
/* Navbar */
38+
.navbar {
39+
background: var(--card-bg);
40+
border-bottom: 1px solid var(--border);
41+
box-shadow: var(--shadow);
42+
position: sticky;
43+
top: 0;
44+
z-index: 100;
45+
}
46+
47+
.navbar-container {
48+
max-width: 800px;
49+
margin: 0 auto;
50+
padding: 0 1rem;
51+
display: flex;
52+
align-items: center;
53+
justify-content: space-between;
54+
height: 60px;
55+
}
56+
57+
.navbar-brand {
58+
display: flex;
59+
align-items: center;
60+
text-decoration: none;
61+
transition: var(--transition);
62+
}
63+
64+
.navbar-brand img {
65+
height: 36px;
66+
width: 36px;
67+
}
68+
69+
.navbar-brand:hover {
70+
opacity: 0.8;
71+
}
72+
73+
.navbar-menu {
74+
display: flex;
75+
gap: 1rem;
76+
list-style: none;
77+
margin: 0;
78+
padding: 0;
79+
}
80+
81+
.navbar-link {
82+
text-decoration: none;
83+
color: var(--turquoise-darker);
84+
padding: 0.5rem 1rem;
85+
border-radius: 6px;
86+
transition: var(--transition);
87+
font-weight: 700;
88+
}
89+
90+
.navbar-link:hover {
91+
color: var(--turquoise);
92+
background: var(--primary-light);
93+
}
94+
95+
.navbar-link.active {
96+
color: var(--turquoise);
97+
background: var(--primary-light);
98+
}
99+
37100
.container {
38101
max-width: 800px;
39102
margin: 0 auto;
@@ -539,6 +602,22 @@ footer {
539602

540603
/* Responsive */
541604
@media (max-width: 640px) {
605+
.navbar-container {
606+
flex-direction: column;
607+
height: auto;
608+
padding: 1rem;
609+
gap: 1rem;
610+
}
611+
612+
.navbar-brand {
613+
font-size: 1rem;
614+
}
615+
616+
.navbar-menu {
617+
width: 100%;
618+
justify-content: center;
619+
}
620+
542621
.preset-grid {
543622
grid-template-columns: 1fr 1fr;
544623
}

0 commit comments

Comments
 (0)