Skip to content

Commit

Permalink
Fix navigation bar layout and functionality
Browse files Browse the repository at this point in the history
- Move logo inside the navigation bar for better alignment.
- Link the logo to the home page for easy navigation.
- Remove the redundant home button from the navigation bar.
  • Loading branch information
Devmoni authored and quozl committed Dec 24, 2024
1 parent 266bea9 commit 58bc52a
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 10 deletions.
7 changes: 7 additions & 0 deletions aslo4-static/css/common.css
Original file line number Diff line number Diff line change
Expand Up @@ -368,3 +368,10 @@ Spinner
}
}

/* Ensure the dropdown menu aligns to the left */
.dropdown-menu-right {
left: auto;
right: 0;
transform: translateX(-100%);
}

8 changes: 4 additions & 4 deletions aslo4-static/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@

<!-- Search bar -->
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto" style="margin: 23px;min-width: 70%">
<div class="col-sm-12 text-center">
<img class="center-block mx-auto shadow-lg" src="img/sugarappstore_png.png" style="margin: 23px;width:50%; border-radius: 50%"
alt="Sugar Labs AppStore Logo">
</div>
<!-- <div class="col-sm-12 text-center">
<img class="center-block mx-auto shadow-lg" src="img/sugarappstore_png.png" style="margin: 23px; width: 30%; border-radius: 50%"
alt="Sugar Labs AppStore Logo">
</div> -->
<form id="saas-search-container">
<div class="form-row">
<input id="saas-search-box"
Expand Down
12 changes: 6 additions & 6 deletions aslo4-static/templates/navigation.html
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
<!-- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sass-navbar">
<a class="navbar-brand" href="{{ catalog.prefix }}/">{{ catalog.name }}</a>
<a class="navbar-brand d-flex align-items-center" href="{{ catalog.prefix }}/">
<img src="img/sugarappstore_png.png" style="margin-right: 10px; width: 40px; height: 40px; border-radius: 50%;" alt="Sugar Labs AppStore Logo">
{{ catalog.name }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ catalog.prefix }}/">Home</a>
<li>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-adjust"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a id="theme-dropdown" class="dropdown-item" onclick="enableDarkTheme()" href="#">
<i class="fa fa-moon"></i> Dark theme</a>
<a id="classic-dropdown" class="dropdown-item" onclick="enableMultiColorTheme()" href="#">
Expand Down

0 comments on commit 58bc52a

Please sign in to comment.