diff --git a/fragdenstaat_de/templates/header.html b/fragdenstaat_de/templates/header.html index 9f6085118..25cda7330 100644 --- a/fragdenstaat_de/templates/header.html +++ b/fragdenstaat_de/templates/header.html @@ -12,240 +12,134 @@ {% endif %} - - - {% page_url "home" as home_url %} - - {% render_svg "img/header_logo.svg" %} - {% block nav_brand_name %}{{ SITE_NAME }}{% endblock %} - - {% url 'foirequest-list' as requests_url %} - {% block nav %} - - - - {% translate "Menu" %} - - - - {% render_svg "img/header_logo.svg" %} - {% translate "Main Menu" %} - - - - - - - {% blocktrans %}Requests{% endblocktrans %} - - - - - - {% blocktrans %}See requests{% endblocktrans %} - - - - - {% blocktrans %}Make request{% endblocktrans %} - - - {% page_url "beginnersguide" as beginners_url %} - {% if beginners_url %} - - - {% blocktrans %}Beginner's guide{% endblocktrans %} - - - {% endif %} - - - - {% page_url "campaigns" as campaigns_url %} - - - {% blocktrans %}Campaigns{% endblocktrans %} - - - - {% page_url "blog" as blog_url %} - - - {% blocktrans %}Investigations{% endblocktrans %} - - - - {% page_url "lawsuits" as lawsuits_url %} - {% if lawsuits_url %} - {% page_attribute "menu_title" "lawsuits" as lawsuits_title %} - {% endif %} - - - {{ lawsuits_title }} - - - - - - - {% page_url "about" as about_url %} - {% if about_url %} - {% page_attribute "menu_title" "about" as about_title %} - {% endif %} - - - {{ about_title }} - - - - {% page_url "newsletter" as newsletter_url %} - {% if newsletter_url %} - - {% translate "Newsletter" %} - - {% endif %} - - {# Show either donate or signin as last item #} - {% page_url "donate" as donate_url %} - {% if request.user.is_authenticated %} - - - - {% blocktrans %}Donate{% endblocktrans %} - - - {% else %} - {% url 'account-login' as login_url %} - - - - {% blocktrans %}Sign in{% endblocktrans %} - - - {% endif %} - - - - - {% blocktrans %}Search requests, authorities, investigations etc.{% endblocktrans %} - - - - {% translate "Search" %} - - - - - - - - {% endblock nav %} - - - - {% block nav_search %} - - - - {% translate "Search" %} + + + + + + + {% trans "Menu" %} - {% endblock nav_search %} - {% block nav_donate %} - - - - {% translate "Donate" %} + {% page_url "home" as home_url %} + + + {% render_svg "img/header_logo.svg" %} + + {% block nav_brand_name %}{{ SITE_NAME }}{% endblock %} + - {% endblock nav_donate %} - {% block nav_account_login %} + {% if request.user.is_authenticated %} - - - {% if request.user.profile_photo %} - - {% else %} - - - {{ request.user.first_name }} - - {% endif %} - - - {% endif %} - {% endblock %} - - {% if request.user.is_authenticated %} - - - {% translate "Account Menu" %} {% if request.user.profile_photo %} - + + + + {% else %} + + + {{ request.user.first_name }} + {% endif %} - - {{ request.user.get_full_name }} - {{ request.user.email }} - - - - - - {% for menu_item in menu_items.before_request %} - - - {{ menu_item.label }} - - - {% endfor %} - {% for menu_item in menu_items.before_settings %} - - - {{ menu_item.label }} - - - {% endfor %} - {% for menu_item in menu_items.after_settings %} - - - {{ menu_item.label }} - - - {% endfor %} - - - - {% csrf_token %} - - {% blocktrans %}Log out{% endblocktrans %} - - + + {% else %} + {% url 'account-login' as login_url %} + {% page_url "donate" as donate_url %} + + + {% blocktrans %}Donate{% endblocktrans %} + + {% endif %} + + + + {% page_url "about" as about_url %} + {% if about_url %} + {% page_attribute "menu_title" "about" as about_title %} + + {{ about_title }} + + {% endif %} + {% page_url "newsletter" as newsletter_url %} + {% if newsletter_url %} + + {% translate "Newsletter" %} + + {% endif %} + {# Show either donate or signin as last item #} + {% page_url "donate" as donate_url %} + + + + {% blocktrans %}Donate{% endblocktrans %} + + + + + + {% url 'foirequest-list' as requests_url %} + + {% blocktrans %}Requests{% endblocktrans %} + + + {% blocktrans %}See requests{% endblocktrans %} + + + {% blocktrans %}Make request{% endblocktrans %} + + {% page_url "beginnersguide" as beginners_url %} + {% if beginners_url %} + + {% blocktrans %}Beginner's guide{% endblocktrans %} - - + {% endif %} + + + {% page_url "campaigns" as campaigns_url %} + + {% blocktrans %}Campaigns{% endblocktrans %} + + {% page_url "blog" as blog_url %} + + {% blocktrans %}Investigations{% endblocktrans %} + + {% page_url "lawsuits" as lawsuits_url %} + {% if lawsuits_url %} + {% page_attribute "menu_title" "lawsuits" as lawsuits_title %} {% endif %} - - - - - - - - - - {% blocktrans %}Search requests, authorities, investigations etc.{% endblocktrans %} + + {{ lawsuits_title }} + + + + - + - {% translate "Search" %} + + {% translate "Search" %} - - - + + + - + diff --git a/frontend/javascript/main.ts b/frontend/javascript/main.ts index 96461e16c..53e93244e 100644 --- a/frontend/javascript/main.ts +++ b/frontend/javascript/main.ts @@ -11,6 +11,7 @@ import 'froide/frontend/javascript/snippets/color-mode' import './donation-form' import './magnifier' import './misc' +import './navbar' import './slider.js' import './smooth-scroll' import './top-banner' diff --git a/frontend/javascript/navbar.ts b/frontend/javascript/navbar.ts new file mode 100644 index 000000000..c048ff104 --- /dev/null +++ b/frontend/javascript/navbar.ts @@ -0,0 +1,3 @@ +document.querySelector('#toggle-mobile-nav')?.addEventListener('click', () => { + document.querySelector('#nav-menu')?.classList.toggle('show') +}) diff --git a/frontend/styles/header.scss b/frontend/styles/header.scss index 56b2e0484..891f2cd9c 100644 --- a/frontend/styles/header.scss +++ b/frontend/styles/header.scss @@ -1,65 +1,117 @@ -.navbar-fds { - padding-top: 0.5rem; +@use 'sass:map'; - @include media-breakpoint-up(md) { - padding-top: 2.25rem; +$c: map.get($container-max-widths, 'xxl'); + +nav.navbar { + padding: $spacer 0; + margin-bottom: $spacer; + + ul.nav-ul, + ul.nav-menu { + list-style: none; + padding: 0; + margin: 0; } - .nav-link:active { - color: var(--#{$prefix}navbar-active-color); + ul.nav-ul { + display: flex; + flex-wrap: wrap; + align-items: center; + position: relative; } -} -.navbar-brand-fds { - position: relative; - top: -0.25rem; - - @include media-breakpoint-up(md) { - top: -0.5rem; + + li a { + font-weight: 600; + color: var(--bs-emphasis-color); + + &:hover { + text-decoration: none; + color: var(--bs-link-color); + } } - svg { - width: 55px; - - .brand-name { - display: block; + .user-profile { + width: 2.5rem; + height: 2.5rem; + font-size: 1.25rem; + } + + @include media-breakpoint-down(md) { + border-bottom: 1px var(--bs-border-color-translucent) solid; + + ul.nav-ul { + justify-content: space-between; } - @include media-breakpoint-up(md) { - width: auto; + ul.nav-menu { + display: flex; + opacity: 0; + flex-direction: column; + gap: $spacer * 0.5 0; + position: absolute; + top: calc(100% + $spacer + 1px); // to show the navbar border + left: calc(var(--bs-gutter-x) * -0.5); + padding: var(--bs-gutter-x); + background-color: var(--bs-body-bg); + width: calc(100% + var(--bs-gutter-x)); + pointer-events: none; + transition: opacity 0.2s linear; - .brand-name { - display: block; + &.show { + opacity: 1; + pointer-events: unset; } } - } -} -.navbar-nav-primary { - .navbar-link { - font-weight: bold; + li.nav-sm { + order: 99; + } + + li.nav-search { + padding-top: $spacer; + padding-bottom: $spacer * 2; + margin-bottom: $spacer; + border-bottom: 1px var(--bs-border-color-translucent) solid; + } + + .dropdown-menu { + position: static; + display: flex; + flex-direction: column; + width: 100%; + border: none; + box-shadow: none; + } + + .dropdown-item { + padding: $spacer * 0.25 $spacer; + color: var(--bs-link-color); + + &:active { + background-color: transparent; + } + } } -} -.navbar-nav-secondary { @include media-breakpoint-up(md) { - position: absolute; - top: 0; - right: 0; + overflow-x: hidden; - .nav-link { - font-size: 0.85rem !important; - font-weight: normal; + ul.nav-ul { + flex-direction: row; + gap: 0 1rem; } - .nav-item:last-child .nav-link { - padding-right: 0; + + ul.nav-menu { + display: contents; } - } -} -.navbar-fds .dropdown-menu { - @include media-breakpoint-down(md) { - border: none; - @include border-radius(0); - @include box-shadow(none); + .nav-break { + width: 100%; + margin-top: $spacer * 1.5; + margin-bottom: $spacer; + background-color: var(--bs-border-color-translucent); + height: 1px; + transform: scaleX(250%); + } } }
{% blocktrans %}Search requests, authorities, investigations etc.{% endblocktrans %}