search

benjaminkott / bootstrap_package

Bootstrap Package delivers a full configured theme for TYPO3, based on the Bootstrap CSS Framework.
https://www.bootstrap-package.com/
MIT License
337 stars 203 forks source link

Menu bar above MainNavigation for contacts and so on #1400

Open aksenovaa opened 1 year ago

aksenovaa commented 1 year ago

Feature Request

A single MainNavigation menu bar is often not enough. It is a good idea to add a menu bar above it for e.g. contacts.

Describe the solution you'd like

In /Resources/Private/Partials/Page/DropIn/Navigation/MainBefore.html i add:

<ul id="MineContacts" class="navbar-nav">
    <li class="nav-item"
.....
</li>
  <li class="nav-item"
.....
</li>
</ul>

Where I added the phone and e-mail links I need The phone and email links themselves can be made as pages of links to external resources tel: mailto: To display all this on the site in the form of two menu lines, I added the following rule to scss:

.navbar-mainnavigation .navbar-collapse {
  flex-direction: column;
}

Describe alternatives you've considered

All this functionality can be done similar to the meta menu in the footer. In /Resources/Private/Layouts/Page/Default.html add <f:render partial="Navigation/MainContacts" arguments="{_all}" /> And add Partial /Resources/Private/Partials/Page/Navigation/MainContacts.html And TS for menu, as meta menu:

            1629126321 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
            1629126321 {
                special = {$page.theme.footernavigation.navigationType}
                special.value = {$page.theme.footernavigation.navigationValue}
                includeNotInMenu = {$page.theme.footernavigation.includeNotInMenu}
                levels = {$page.theme.footernavigation.levels}
                as = footernavigation
                if {
                    isTrue = {$page.theme.footernavigation.navigationValue}
                }
                dataProcessing {
                    1629202464 = BK2K\BootstrapPackage\DataProcessing\IconsDataProcessor
                    1629202464 {
                        iconSet.field = nav_icon_set
                        iconIdentifier.field = nav_icon_identifier
                        iconFileFieldName = nav_icon
                        as = icon
                    }
                }
            }
benjaminkott commented 1 year ago

I support your idea, but simply i have no general solution for now that we could ship -> out of the box.

We already have a dedicated meta menu, and also a contact menu could help here. But there is also the wish of moving the language selector to the top, also including messages and a search form.

For now I've made the decision to not touch it and try to keep the templates adjustable to everyone can do it on their own needs. But i am open for suggesions.

aksenovaa commented 1 year ago

To summarise what I did for myself: In setup TS:

# DataProcessing
page.10.dataProcessing.130720231410 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
page.10.dataProcessing.130720231410 {
  special = {$page.theme.contactsnavigation.navigationType}
  special.value = {$page.theme.contactsnavigation.navigationValue}
  includeNotInMenu = {$page.theme.contactsnavigation.includeNotInMenu}
  levels = {$page.theme.contactsnavigation.levels}
  as = contactsnavigation
  if {
    isTrue = {$page.theme.contactsnavigation.navigationValue}
  }
  dataProcessing {
    130720231411 = BK2K\BootstrapPackage\DataProcessing\IconsDataProcessor
    130720231411 {
      iconSet.field = nav_icon_set
      iconIdentifier.field = nav_icon_identifier
      iconFileFieldName = nav_icon
      as = icon
    }
  }
}

In constant TS:

...
page {
    theme {
...
        contactsnavigation {
            navigationType = list
            navigationValue = 85,86,87
            levels = 1
            includeNotInMenu = 1
        }
    }
...
}

And .../Resources/Private/Partials/Page/Navigation/Main.html


<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers" data-namespace-typo3-fluid="true">

<f:variable name="headerClass">bp-page-header navbar navbar-mainnavigation navbar-{theme.navigation.style}</f:variable>
<f:variable name="headerClass">{headerClass}{f:if(condition: logo.normal, then:' navbar-has-image')}</f:variable>
<f:variable name="headerClass">{headerClass}{f:if(condition: theme.navigation.type, else:' navbar-top', then:' navbar-{theme.navigation.type} navbar-fixed-{theme.navigation.type}')}</f:variable>
<header id="page-header" class="{headerClass}">
    <div class="container container-mainnavigation">
        <f:render partial="Header/Logo" arguments="{_all}" />
        <f:if condition="{mainnavigation}">
            <f:render partial="Header/Toggle" arguments="{_all}" />
            <nav aria-label="{f:translate(key: 'main-navigation.label', extensionName: 'bootstrap_package')}" id="mainnavigation" class="collapse navbar-collapse">
                <f:render partial="DropIn/Navigation/MainBefore" arguments="{_all}"/>
                <f:comment><!--Additing Contacts Navigation Above--></f:comment>
                <f:render partial="Navigation/ContactsNavigation" arguments="{_all}" />
                <f:render partial="Navigation/MainNavigation" arguments="{_all}" />
                <f:render partial="DropIn/Navigation/MainAfter" arguments="{_all}"/>
            </nav>
        </f:if>
    </div>
</header>

</html>

I added a new partials in path .../Resources/Private/Partials/Page/Navigation/ContactsNavigation.html, a copy of the .../Resources/Private/Partials/Page/Navigation/MainNavigationDropDown.html but you can tweak it to suit you. For example, add search, link to home page, etc.

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{contactsnavigation}">
    <ul id="contacts_navigation" class="navbar-nav">
        <f:for each="{contactsnavigation}" as="item">
            <f:if condition="{item.spacer}">
                <f:then>
                    <li class="nav-spacer" aria-hidden="true"></li>
                </f:then>
                <f:else>
                    <li class="nav-item{f:if(condition: item.children, then:' nav-style-simple')}">
                        <a
                            id="nav-item-{item.data.uid}"
                            href="{item.link}"
                            class="nav-link nav-link-main{f:if(condition: item.active, then:' active')}"
                            {f:if(condition: '{item.target}', then: ' target="{item.target}"')}
                            {f:if(condition: '{item.target} == "_blank"', then: ' rel="noopener noreferrer"')}
                            aria-current="{f:if(condition: item.current, then:'true', else: 'false')}"
                            >
                            <f:if condition="{theme.navigation.dropdown.icon.enable} && {item.icon}">
                                <span class="nav-link-icon">
                                    <bk2k:icon icon="{item.icon}" width="{theme.navigation.dropdown.icon.width}" height="{theme.navigation.dropdown.icon.height}" />
                                </span>
                            </f:if>
                            <span class="nav-link-text">
                                {item.title}
                            </span>
                        </a>
                        <f:if condition="{item.children}">
                            <button
                                type="button"
                                id="nav-toggle-{item.data.uid}"
                                class="nav-link nav-link-toggle"
                                data-bs-toggle="dropdown"
                                data-bs-display="static"
                                aria-haspopup="true"
                                aria-expanded="false"
                                >
                                <span class="nav-link-indicator" aria-hidden="true"></span>
                                <span class="nav-link-text visually-hidden">Submenu for "{item.title}"</span>
                            </button>
                        </f:if>
                        <div class="dropdown-menu{f:if(condition: item.children, then:' dropdown-menu-simple')}">
                            <f:render partial="Navigation/MainNavigationDropDown" arguments="{data: data, page: item, items: item.children, theme: theme}" />
                        </div>
                    </li>

                </f:else>
            </f:if>
        </f:for>
    </ul>
</f:if>
</html>

And in theme scss:

.navbar-mainnavigation .navbar-collapse {
  flex-direction: column;
}