Skip to content

Commit 103de34

Browse files
AryanVBWAryanVBW
authored
Enhance Navigation Bar UI/UX for Desktop and Mobile Views (#284)
* Add dark mode support * fix: improve logo visibility in light and dark themes This commit addresses two logo visibility issues: 1. User logos are now displayed on a white background in dark theme to provide proper contrast 2. Feature icons on the homepage (particularly namespace logo) now have a subtle drop shadow to improve visibility against light backgrounds * feat(ui): Enhance navigation bar for desktop and mobile views Improve the website's navigation bar with modern styling and better responsiveness
1 parent bbb28fc commit 103de34

File tree

2 files changed

+162
-0
lines changed

2 files changed

+162
-0
lines changed

‎docusaurus.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ const config = {
104104
],
105105
},
106106
],
107+
hideOnScroll: true,
107108
},
108109
footer: {
109110
style: 'dark',

‎src/css/custom.css

+161
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,164 @@
7878
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NzMuMTIgNzczLjEyIj48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM1MGFkZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3ODc3ZmMiLz48L2xpbmVhckdyYWRpZW50PjxjaXJjbGUgY3g9IjM4Ni41NiIgY3k9IjM4Ni41NiIgcj0iMzg2LjU2IiBmaWxsPSJ1cmwoI2EpIi8+PHBhdGggZD0iTTU2Ni42NiA1MjcuMjVjMCAzMy4wMy0yNC4yMyA2MC4wNS01My44NCA2MC4wNUgyNjAuMjljLTI5LjYxIDAtNTMuODQtMjcuMDItNTMuODQtNjAuMDUgMC0yMC4yMiA5LjA5LTM4LjIgMjIuOTMtNDkuMDlsMTM0LjM3LTEyMGMyLjUtMi4xNCA1Ljc0IDEuMzEgMy45NCA0LjE5bC00OS4yOSA5OC42OWMtMS4zOCAyLjc2LjQxIDYuMTYgMy4yNSA2LjE2aDE5MS4xOGMyOS42MSAwIDUzLjgzIDI3LjAzIDUzLjgzIDYwLjA1em0wLTI4MS4zOWMwIDIwLjIyLTkuMDkgMzguMi0yMi45MyA0OS4wOWwtMTM0LjM3IDEyMGMtMi41IDIuMTQtNS43NC0xLjMxLTMuOTQtNC4xOWw0OS4yOS05OC42OWMxLjM4LTIuNzYtLjQxLTYuMTYtMy4yNS02LjE2SDI2MC4yOWMtMjkuNjEgMC01My44NC0yNy4wMi01My44NC02MC4wNXMyNC4yMy02MC4wNSA1My44NC02MC4wNWgyNTIuNTRjMjkuNjEgMCA1My44MyAyNy4wMiA1My44MyA2MC4wNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=")
7979
no-repeat;
8080
}
81+
82+
/* Navbar styling */
83+
.navbar {
84+
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
85+
transition: all 0.3s ease;
86+
padding: 0.5rem 1rem;
87+
}
88+
89+
.navbar__logo {
90+
height: 2.5rem;
91+
margin-right: 0.5rem;
92+
transition: transform 0.2s ease;
93+
}
94+
95+
.navbar__logo:hover {
96+
transform: scale(1.05);
97+
}
98+
99+
.navbar__brand {
100+
font-weight: 600;
101+
}
102+
103+
.navbar__link {
104+
font-weight: 500;
105+
position: relative;
106+
transition: all 0.2s ease;
107+
}
108+
109+
.navbar__link:hover {
110+
color: var(--ifm-color-primary);
111+
}
112+
113+
.navbar__link:after {
114+
content: '';
115+
position: absolute;
116+
width: 0;
117+
height: 2px;
118+
bottom: -4px;
119+
left: 0;
120+
background-color: var(--ifm-color-primary);
121+
transition: width 0.3s ease;
122+
}
123+
124+
.navbar__link:hover:after {
125+
width: 100%;
126+
}
127+
128+
/* Dropdown menu styling */
129+
.navbar__item.dropdown .navbar__link {
130+
display: flex;
131+
align-items: center;
132+
}
133+
134+
.navbar__item.dropdown .navbar__link:after {
135+
content: '';
136+
width: 0;
137+
height: 0;
138+
border-left: 5px solid transparent;
139+
border-right: 5px solid transparent;
140+
border-top: 5px solid var(--ifm-navbar-link-color);
141+
margin-left: 6px;
142+
transition: transform 0.2s ease;
143+
}
144+
145+
.navbar__item.dropdown:hover .navbar__link:after {
146+
transform: rotate(180deg);
147+
}
148+
149+
.dropdown__menu {
150+
min-width: 200px;
151+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
152+
border-radius: 6px;
153+
padding: 0.5rem 0;
154+
border: 1px solid rgba(0, 0, 0, 0.05);
155+
}
156+
157+
[data-theme='dark'] .dropdown__menu {
158+
background-color: #2a2e33;
159+
border: 1px solid rgba(255, 255, 255, 0.05);
160+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
161+
}
162+
163+
.dropdown__link {
164+
padding: 0.75rem 1.25rem;
165+
font-weight: 500;
166+
transition: all 0.2s ease;
167+
position: relative;
168+
display: flex;
169+
align-items: center;
170+
}
171+
172+
.dropdown__link:hover {
173+
background-color: var(--ifm-color-primary-lightest);
174+
color: var(--ifm-color-primary-darkest);
175+
}
176+
177+
[data-theme='dark'] .dropdown__link:hover {
178+
background-color: rgba(78, 147, 205, 0.15);
179+
color: var(--ifm-color-primary-lightest);
180+
}
181+
182+
/* Mobile navbar styling */
183+
@media (max-width: 996px) {
184+
.navbar__toggle {
185+
margin-right: 0.5rem;
186+
}
187+
188+
.navbar-sidebar {
189+
box-shadow: 0 0 15px rgba(0,0,0,0.2);
190+
}
191+
192+
.navbar-sidebar__brand {
193+
padding: 0.75rem 1rem;
194+
}
195+
196+
.navbar-sidebar__items {
197+
padding: 0.5rem 0;
198+
}
199+
200+
.navbar-sidebar__item {
201+
padding: 0.75rem 1.5rem;
202+
}
203+
204+
.navbar-sidebar__back {
205+
background-color: var(--ifm-color-primary-lightest);
206+
color: var(--ifm-color-primary-darkest);
207+
padding: 0.75rem 1.5rem;
208+
font-weight: 600;
209+
border-radius: 4px;
210+
margin: 0.5rem 1rem;
211+
}
212+
213+
.menu__link {
214+
border-radius: 4px;
215+
transition: all 0.2s ease;
216+
}
217+
218+
.menu__link:hover {
219+
background-color: var(--ifm-color-primary-lightest);
220+
}
221+
222+
/* Mobile dropdown styling */
223+
.navbar-sidebar .navbar__item.dropdown .menu__link {
224+
padding: 0.75rem 1.5rem;
225+
}
226+
227+
.navbar-sidebar .navbar__item.dropdown .menu {
228+
padding-left: 1rem;
229+
}
230+
231+
.navbar-sidebar .dropdown__menu {
232+
box-shadow: none;
233+
border: none;
234+
padding: 0;
235+
}
236+
237+
.navbar-sidebar .dropdown__link {
238+
border-radius: 4px;
239+
margin: 0.25rem 0;
240+
}
241+
}

0 commit comments

Comments
 (0)