Skip to content

Commit d6cb85a

Browse files
author
Jacek Gębal
committed
Improving and refactoring the shared top navigation bar.
1 parent 6a457bd commit d6cb85a

5 files changed

Lines changed: 362 additions & 64 deletions

File tree

‎docs/assets/topbar.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
#utplsql-topbar {
2+
background: #1565c0;
3+
padding: 0 1rem;
4+
display: flex;
5+
align-items: center;
6+
height: 2rem;
7+
font-size: 0.7rem;
8+
font-family: var(--md-text-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
9+
position: sticky;
10+
top: 0;
11+
z-index: 10;
12+
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
13+
letter-spacing: 0.03em;
14+
}
15+
16+
#utplsql-topbar a {
17+
color: rgba(255,255,255,0.72);
18+
text-decoration: none;
19+
padding: 0 0.5rem;
20+
line-height: 2rem;
21+
white-space: nowrap;
22+
transition: color 0.15s;
23+
}
24+
25+
#utplsql-topbar a:hover,
26+
#utplsql-topbar a.utplsql-active {
27+
color: #fff;
28+
}
29+
30+
#utplsql-topbar .utplsql-brand {
31+
font-weight: 700;
32+
color: #fff;
33+
padding-right: 0.75rem;
34+
margin-right: 0.25rem;
35+
border-right: 1px solid rgba(255,255,255,0.25);
36+
display: flex;
37+
align-items: center;
38+
gap: 0.4rem;
39+
}
40+
41+
#utplsql-topbar .utplsql-brand img {
42+
height: 1.3rem;
43+
width: auto;
44+
display: block;
45+
}
46+
47+
#utplsql-topbar .utplsql-controls {
48+
margin-left: auto;
49+
display: flex;
50+
align-items: center;
51+
gap: 0.1rem;
52+
}
53+
54+
#utplsql-topbar .utplsql-controls button {
55+
background: none;
56+
border: none;
57+
cursor: pointer;
58+
color: rgba(255,255,255,0.72);
59+
padding: 0 0.4rem;
60+
height: 2rem;
61+
display: flex;
62+
align-items: center;
63+
transition: color 0.15s;
64+
border-radius: 0.2rem;
65+
}
66+
67+
#utplsql-topbar .utplsql-controls button:hover {
68+
color: #fff;
69+
}
70+
71+
#utplsql-topbar .utplsql-controls button svg {
72+
width: 1rem;
73+
height: 1rem;
74+
fill: currentColor;
75+
display: block;
76+
}
77+
78+
/* Material header sits below the topbar */
79+
.md-header,
80+
.md-header--shadow {
81+
top: 2rem !important;
82+
}
83+
84+
/* Hide drawer hamburger and logo — our topbar has both.
85+
Leave the search icon button intact so mobile search still works. */
86+
.md-header__button:not([for="__search"]) {
87+
display: none !important;
88+
}
89+
90+
/* Move palette toggle off-screen — our topbar handles theme switching */
91+
.md-header__option {
92+
position: absolute !important;
93+
left: -9999px !important;
94+
}
95+
96+
/* Hide Material's logo/title — brand lives in the topbar */
97+
.md-header__title {
98+
display: none !important;
99+
}
100+
101+
/* Sidebars sit below the topbar + Material header (~2rem + 2.4rem) */
102+
.md-sidebar {
103+
top: 4.4rem !important;
104+
}
105+
106+
/* Hide the tab bar — the topbar handles top-level navigation */
107+
.md-tabs {
108+
display: none !important;
109+
}
110+
111+
/* Hamburger button — hidden by default, shown via media query on mobile */
112+
#utplsql-topbar .utplsql-hamburger {
113+
display: none;
114+
background: none;
115+
border: none;
116+
cursor: pointer;
117+
color: rgba(255,255,255,0.72);
118+
padding: 0 0.4rem;
119+
height: 2rem;
120+
align-items: center;
121+
flex-shrink: 0;
122+
transition: color 0.15s;
123+
}
124+
125+
#utplsql-topbar .utplsql-hamburger:hover {
126+
color: #fff;
127+
}
128+
129+
#utplsql-topbar .utplsql-hamburger svg {
130+
width: 1.2rem;
131+
height: 1.2rem;
132+
fill: currentColor;
133+
display: block;
134+
}
135+
136+
@media screen and (max-width: 76.1875em) {
137+
/* Hide nav links on mobile — sidebar drawer handles navigation */
138+
#utplsql-topbar a:not(.utplsql-brand) {
139+
display: none;
140+
}
141+
142+
/* Show hamburger */
143+
#utplsql-topbar .utplsql-hamburger {
144+
display: flex;
145+
}
146+
147+
/* Material's mobile search overlay is position:fixed from top:0.
148+
Shift the whole search container (form + output together) below our topbar. */
149+
.md-search__inner {
150+
padding-top: 2rem !important;
151+
}
152+
}

0 commit comments

Comments
 (0)